有灰色边框的九宫格

由于工作需要，刚刚做了一个九宫格布局，感觉还是挺有用的，所以很想和大家分享一下。下面让我们来了解一下吧。

---

一、九宫格
我认为的九宫格就是每个格子都是正方形的，同时能够自适应各种安卓手机屏幕的宽度。我们平时看到的九宫格也有带边框的。其实也是很简单的。
准备工作：GridView,自定义Layout(宽高相等的一个自定义布局)

---

二、效果图

三、代码
1、Activity

public class SudokuActivity extends Activity implements OnItemClickListener{
    private Context context;
    private GridView gv_sudoku_menu;
    private SuokuGridAdapter adapter;
    @Override
    public void onCreate(Bundle savedInstanceState) {       
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sudoku);
        context=SudokuActivity.this;
        initView();
        initData();
    }
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,long id) {
        Toast.makeText(context, "选择了图"+(((MenuEntity)adapter.getItem(position)).menuCode+1), Toast.LENGTH_SHORT).show();
    }

    private void initView()
    {
        gv_sudoku_menu=(GridView)findViewById(R.id.gv_sudoku_menu);
        gv_sudoku_menu.setOnItemClickListener(this);
    }
    private void initData()
    {
        adapter=new SuokuGridAdapter(context,getData());
        gv_sudoku_menu.setAdapter(adapter);
    }
    private List<MenuEntity> getData( )
    {
        List<MenuEntity> entityList=new ArrayList<MenuEntity>();
        List<Integer> resourceList=new ArrayList< Integer>();
        List<String> textList=new ArrayList<String>();
        resourceList.add(R.drawable.a);
        textList.add("图一");
        resourceList.add(R.drawable.b);
        textList.add("图二");
        resourceList.add(R.drawable.c);
        textList.add("图三");
        resourceList.add(R.drawable.d);
        textList.add("图四");
        resourceList.add(R.drawable.e);
        textList.add("图五");
        resourceList.add(R.drawable.f);
        textList.add("图六");
        resourceList.add(R.drawable.g);
        textList.add("图七");
        resourceList.add(R.drawable.h);
        textList.add("图八");
        resourceList.add(R.drawable.i);
        textList.add("图九");
        for(int i=0;i<resourceList.size();i++)
        {
            MenuEntity entity=new MenuEntity(i,resourceList.get(i),textList.get(i));
            entityList.add(entity);     
        }
        return entityList;
    }
    //用来存储每个选项内容的类。有时候我们需要放好多复杂的信息，就可以定义一个类。
    private class MenuEntity{
        public int menuCode;
        public int menuImg;
        public String menuText;
        public MenuEntity()
        {

        }
        public MenuEntity(int menuCode,int menuImg,String menuText){
            this.menuCode=menuCode;
            this.menuImg=menuImg;
            this.menuText=menuText;
        }
    }
    //自定义GridView的Adapter
    private class SuokuGridAdapter extends BaseAdapter
    {
        private Context _context;
        private List<MenuEntity> list=new ArrayList<MenuEntity>();

        public SuokuGridAdapter(Context context,List<MenuEntity> dataList){
            _context=context;
            list=dataList;
        }
        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) { 
             final MenuEntity entity = list.get(position);
             Holder holder;
             if(convertView==null)
             {
                 LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                 convertView = inflater.inflate(R.layout.activity_sudoku_item, null, false);
                 holder=new Holder();
                 holder.imgView=(ImageView)convertView.findViewById(R.id.img_sudoku_ItemImage);
                 holder.textView=(TextView)convertView.findViewById(R.id.tv_sudoku_ItemText);
                 holder.rightView=(View)convertView.findViewById(R.id.view_sudoku_rightview);
                 convertView.setTag(holder);
             }
             else
             {
                 holder = (Holder) convertView.getTag();
             }
             //如果每行放N个方格，就if((position+1)%N==0)，我这里是每行3个方格。主要用来隐藏方格右侧的灰色边框
             if((position+1)%3==0)
             {
                 holder.rightView.setVisibility(View.GONE);
             }
             else
             {
                 holder.rightView.setVisibility(View.VISIBLE);
             }
             holder.imgView.setBackgroundResource(entity.menuImg);
             holder.textView.setText(entity.menuText);
             return convertView;
        }
        private class Holder{
            public ImageView imgView;
            public TextView  textView;
            public View rightView;
        }   
    }
}

2、自定义正方形布局SquareLayout

public class SquareLayout extends RelativeLayout {

    public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
    }

    public SquareLayout(Context context, AttributeSet attrs) {
            super(context,attrs);
    }

    public SquareLayout(Context context) {
            super(context);
    }

    @SuppressWarnings("unused")
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getDefaultSize(0,widthMeasureSpec), getDefaultSize(0,heightMeasureSpec));
        int childWidthSize = getMeasuredWidth();
        int childHeightSize = getMeasuredHeight();
        //高度和宽度一样
        heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthSize, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec,heightMeasureSpec);
    }
}

3、activity_sudoku.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <GridView 
       android:id="@+id/gv_sudoku_menu"  
       android:layout_width="match_parent" 
       android:layout_height="match_parent"
       android:numColumns="3"
       android:listSelector="@null">
    </GridView>

</RelativeLayout>

4、activity_sudoku_item.xml
在主要内容的下边和右边放一个灰色的View,当做边框，每行最后一个方格的右侧灰色View需要动态设置隐藏

<?xml version="1.0" encoding="utf-8"?>
<com.example.myandroid.SquareLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View 
        android:id="@+id/view_sudoku_rightview"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#EAEAEA"/>
    <View 
        android:id="@+id/view_sudoku_bottomview"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="#EAEAEA"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@id/view_sudoku_rightview"
        android:layout_above="@id/view_sudoku_bottomview"
        android:orientation="vertical"
        android:padding="8dp"
        android:weightSum="1">      
        <ImageView
            android:id="@+id/img_sudoku_ItemImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.2">
        </ImageView>  
        <TextView
            android:id="@+id/tv_sudoku_ItemText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.8"
            android:textSize="14sp"
            android:gravity="center_horizontal" >
        </TextView>
    </LinearLayout>

</com.example.myandroid.SquareLayout>