android - 如何在 GridView 上绘制我的自定义 View ？

Question

我创建了一个自定义 View ，用于在填充圆圈中显示一个字母。例如圆圈是绿色的，上面的字母是红色的。

现在我想在 GridView 中绘制几个自定义 View 。例如，如果 GridView 是 5x5，您将在屏幕上看到 25 个自定义 View (并且每个自定义 View 可能有不同的字母)

有人知道吗？ 谢谢你的帮助

编辑 #1: 这是我的自定义 View

package com.hoangtrinh.paintmycustomview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

public class LetterView extends View {

    private int letterBackgroundColor, letterColor;
    private String letterText;
    private Paint myLetterPaint;

    public int getLetterBackgroundColor() {
        return letterBackgroundColor;
    }

    public void setLetterBackgroundColor(int letterBackgroundColor) {
        this.letterBackgroundColor = letterBackgroundColor;
        invalidate();
        requestLayout();
    }

    public int getLetterColor() {
        return letterColor;
    }

    public void setLetterColor(int letterColor) {
        this.letterColor = letterColor;
        invalidate();
        requestLayout();
    }

    public String getLetterText() {
        return letterText;
    }

    public void setLetterText(String letterText) {
        this.letterText = letterText;
        invalidate();
        requestLayout();
    }

    public LetterView(Context context) {
        super(context);
        AttributeSet attrs = null;
        myLetterPaint = new Paint();
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.LetterView, 0, 0);
        try {
            letterBackgroundColor = a.getInteger(
                    R.styleable.LetterView_letterBackgroundColor, 0);
            letterColor = a.getInteger(R.styleable.LetterView_letterColor, 0);
            letterText = a.getString(R.styleable.LetterView_letterText);
        } finally {
            a.recycle();
        }
    }

    public LetterView(Context context, AttributeSet attrs) {
        super(context);
        myLetterPaint = new Paint();
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.LetterView, 0, 0);
        try {
            letterBackgroundColor = a.getInteger(
                    R.styleable.LetterView_letterBackgroundColor, 0);
            letterColor = a.getInteger(R.styleable.LetterView_letterColor, 0);
            letterText = a.getString(R.styleable.LetterView_letterText);
        } finally {
            a.recycle();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int viewWidthHalf = this.getMeasuredWidth() / 2;
        int viewHeightHalf = this.getMeasuredHeight() / 2;
        int radius = 0;
        if(viewWidthHalf>viewHeightHalf)
            radius=viewHeightHalf-10;
        else
            radius=viewWidthHalf-10;
        myLetterPaint.setAntiAlias(true);
        myLetterPaint.setStyle(Style.FILL);
        myLetterPaint.setColor(letterBackgroundColor);
        canvas.drawCircle(viewWidthHalf, viewHeightHalf, radius, myLetterPaint);
        myLetterPaint.setColor(letterColor);
        myLetterPaint.setTextAlign(Paint.Align.CENTER);
        myLetterPaint.setTextSize(50);
        canvas.drawText(letterText, viewWidthHalf, viewHeightHalf, myLetterPaint);
    }

}

这是我的自定义 View 适配器

package com.hoangtrinh.paintmycustomview;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;

public class LetterViewAdapter extends BaseAdapter {

    private List<LetterView> customViews = new ArrayList<LetterView>();
    private Context context;

    public LetterViewAdapter(List<LetterView> customViews, Context context) {
        this.customViews = customViews;
        this.context = context;
   }

    @Override
    public int getCount() {

        return customViews.size();
    }

    @Override
    public Object getItem(int position) {

        return customViews.get(position);
    }

    @Override
    public long getItemId(int position) {

        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
           // You can construct your view here.
            LetterView letterView = new LetterView(context);
            LinearLayout layout = new LinearLayout(context);
            layout.addView(letterView);
            return layout;

            // or return your custom views array element
            // return customViews.get(position);
        } else {
            return convertView;
        }
    }
}

这是主 Activity

package com.hoangtrinh.paintmycustomview;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends Activity {

    GridView myGridView;
    static final String[] LETTER_CASE = new String[] { 
        "A", "B","C", "D" };
    List<LetterView> customViews = new ArrayList<LetterView>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myGridView = (GridView) findViewById(R.id.gridView1);
        myGridView.setAdapter(new LetterViewAdapter(customViews, this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

这是我的自定义 View (letter.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.hoangtrinh.paintmycustomview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.hoangtrinh.paintmycustomview.LetterView
        android:id="@+id/lv1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        custom:letterBackgroundColor="#00FFFF"
        custom:letterColor="#FF0000"
        custom:letterText="H" />

</LinearLayout>

最后这是我的 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:columnWidth="40dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</GridView>

Answer 1

您必须编写自己的适配器类。扩展BaseAdapter类并覆盖 ( http://developer.android.com/reference/android/widget/Adapter.html#getView (int, android.view.View, android.view.ViewGroup) 以返回您的自定义 View 。

示例:http://developer.android.com/guide/topics/ui/layout/gridview.html

   public class CustomAdapter extends BaseAdapter {

    private List<CustomView> customViews = new ArrayList<CustomView>();
    private Context context;

    public CustomAdapter(List<CustomView> customViews, Context context) {
        this.customViews = customViews;
        this.context = context;
   }

    @Override
    public int getCount() {

        return customViews.size();
    }

    @Override
    public Object getItem(int position) {

        return customViews.get(position);
    }

    @Override
    public long getItemId(int position) {

        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
           // You can construct your view here.
            TextView textView = new TextView(context);
            textView.setText("" + position);
            ImageView imageView = new ImageView(context);
            imageView.setImageDrawable(context.getResources().getDrawable(
                    R.drawable.btn_star));
            LinearLayout layout = new LinearLayout(context);
            layout.addView(textView);
            layout.addView(imageView);
            return layout;

            // or return your custom views array element
            // return customViews.get(position);
        } else {
            return convertView;
        }
    }

}