猜歌游戏小结(四) 设置自定义布局

一、说明

在这个游戏中,游戏下方具有3*8,共24个文字待选框。这几个文字待选框中的内容为随机生成的文字,其中包括有正确答案和干扰文字。而这个文字待选框布局不是系统默认存在的布局,所以需要自定义设置。

二、方法

  • 1、每个一文字待选框,均可以看成是一个button控件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class WordButton {
public int mIndex; //位置索引
public boolean mIsVisiable; //是否可见
public String mWordString; //显示内容
public Button mViewButton;
//构造函数,初始属性
public WordButton() {
mIsVisiable = true;
mWordString = "";
}
}
  • 2、自定义一个View,继承自GridView。用于设置文字待选框。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class MyGridView extends GridView{
private ArrayList<WordButton> mArrayList = new ArrayList<WordButton>();
private MyGridAdpater myAdpater;
public MyGridView(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
myAdpater = new MyGridAdpater();//初始化
this.setAdapter(myAdpater);//关联
}
class MyGridAdpater extends BaseAdapter{
@Override
public int getCount() {
return mArrayList.size();
}
@Override
public Object getItem(int position) {
return mArrayList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
return convertView;
}
  • 3、定义WordButton对象对应的布局。GridView里面,有24个WordButton对象,而每一个WordButton对象对应的布局需要重新定义,文件名为self_ui_gridview_item.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?xml version="1.0" encoding="utf-8"?>
    <Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/word_button_icon"//设置点击效果
    android:text="d"
    android:textColor="@color/black"
    android:textSize="20sp"/>
  • 4、将布局和代码建立关联。建立关联的方法是使用LayoutInflater.设置Adpater的getView方法,该方法的放回值是一个VIew,所以可以新建一个工具类,即新建一个Util文件夹,并在该文件夹下新建一个Util类,其中定义一个getVIew方法。

1
2
3
4
5
6
7
8
public static View getView(Context context,int layoutId){
LayoutInflater layoutInflater = (LayoutInflater)context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(layoutId,null);
return layout;
}
  • 5、设置getView方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final WordButton holder;
if ( convertView == null){
convertView = Util.getView(mContext, R.layout.self_ui_gridview_item);
holder = mArrayList.get(position);
//加载动画
mScaleAnimation = AnimationUtils.loadAnimation(mContext,R.anim.scale);
// 设置动画的延迟时间
mScaleAnimation.setStartOffset(position * 100);
// 初始化控件
holder.mIndex = position;
holder.mViewButton = (Button)convertView.findViewById(R.id.item_btn);
holder.mViewButton.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View arg0) {
mWordButtonListener.onWordButtonClick(holder);
}
});
convertView.setTag(holder);
}else {
holder = (WordButton)convertView.getTag();
}
holder.mViewButton.setText(holder.mWordString);
// 播放动画
// convertView.startAnimation(mScaleAnimation);
return convertView;
}