Android 自定义GridLayout实现频道管理

Android 自定义GridLayout实现频道管理

标签： androidcsdngridviewGridLayout

2017-04-03 22:18 903人阅读 评论(1) 收藏 举报

分类：

Android（3）

版权声明：本文为博主原创文章，未经博主允许不得转载。

前言

以前总是在CSDN上看各位前辈的精彩博客，从中也学习了很多东西。其实自己也一直想写博客，直到今天终于要踏出这一步了，有点小兴奋，哈哈！不足之处，还请各位同仁不吝赐教，拜谢！！！

话不多说，工作中我们时常会遇到频道管理的需求，不少博客使用GridView实现这一功能，个人喜欢用自定义的GridLayout实现，萝卜白菜各有所爱，嘿嘿。

功能

要实现的功能如上图所示（当然，左边只是一个参考，这里界面不是重点，我们要实现这个功能）

1.   分上下两部分

2.“我的频道”实现了长按拖拽排序功能；同时，点击某一子条目时，将该条目从“我的频道”中删除，添加到“更多频道”中。

3.“更多频道”实现了点击事件，当点击某一子条目时，该子条目从“更多频道”中删除，添加到“我的频道”中。

实现代码

主程序代码：

[java] view plain copy

1. import android.os.Bundle;  
2. import android.support.v7.app.AppCompatActivity;  
3. import android.widget.TextView;  
4.   
5. import java.util.ArrayList;  
6. import java.util.List;  
7.   
8. public class MainActivity extends AppCompatActivity {  
9.   
10.     private DragGridLayout showGridLayout;  
11.     private DragGridLayout hideGridLayout;  
12.   
13.     @Override  
14.     protected void onCreate(Bundle savedInstanceState) {  
15.         super.onCreate(savedInstanceState);  
16.         setContentView(R.layout.activity_main);  
17.         initCustom();  
18.     }  
19.   
20.     private void initCustom() {  
21.         showGridLayout = (DragGridLayout) findViewById(R.id.dgl_main_show);  
22.         showGridLayout.setResource(R.drawable.selector_textbg, 10, 5);  
23.         showGridLayout.setEnableDrag(true);  
24.         List<String> items = new ArrayList<>();  
25.         items.add("推荐");  
26.         items.add("本地事");  
27.         items.add("本地人");  
28.         items.add("社区");  
29.         items.add("图集");  
30.         items.add("要闻");  
31.         items.add("热点");  
32.         items.add("旅游");  
33.         items.add("健康");  
34.         showGridLayout.setItems(items);  
35.         hideGridLayout = (DragGridLayout) findViewById(R.id.dgl_main_bottom);  
36.         hideGridLayout.setEnableDrag(false);  
37.         hideGridLayout.setResource(R.drawable.selector_textbg, 10, 5);  
38.         List<String> items1 = new ArrayList<>();  
39.         items1.add("家居");  
40.         items1.add("奇石");  
41.         items1.add("螺蛳粉");  
42.         items1.add("情感");  
43.         items1.add("文化");  
44.         items1.add("体育");  
45.         items1.add("汽车");  
46.         items1.add("本地号");  
47.         items1.add("爆料");  
48.         items1.add("时政");  
49.         items1.add("美女");  
50.         items1.add("公益");  
51.         items1.add("公民榜样");  
52.         items1.add("亲子");  
53.         items1.add("社会");  
54.         items1.add("舌尖柳州");  
55.         items1.add("开心一刻");  
56.         items1.add("居柳州");  
57.         hideGridLayout.setItems(items1);  
58.   
59.         //设置点击事件  
60.         showGridLayout.setOnItemClickListener(new DragGridLayout.OnItemClickListener() {  
61.             @Override  
62.             public void onItemClick(TextView tv) {  
63.                 //当点击时，将返回的TextView从showGridLayout容器中删除，在添加到hideGridLayout中  
64.                 showGridLayout.removeView(tv);  
65.                 hideGridLayout.addItem(tv.getText().toString());  
66.             }  
67.         });  
68.   
69.         hideGridLayout.setOnItemClickListener(new DragGridLayout.OnItemClickListener() {  
70.             @Override  
71.             public void onItemClick(TextView tv) {  
72.                 hideGridLayout.removeView(tv);  
73.                 showGridLayout.addItem(tv.getText().toString());  
74.             }  
75.         });  
76.   
77.   
78.     }  
79.   
80. }  

布局：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     android:orientation="vertical">  
8.   
9.     <LinearLayout  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:orientation="vertical">  
13.   
14.         <TextView  
15.             android:layout_width="match_parent"  
16.             android:layout_height="wrap_content"  
17.             android:background="@color/colorPry"  
18.             android:text="点击增删频道，长按拖拽排序"/>  
19.   
20.         <com.example.customview.DragGridLayout  
21.             android:id="@+id/dgl_main_show"  
22.             android:layout_width="match_parent"  
23.             android:layout_height="wrap_content">  
24.   
25.         </com.example.customview.DragGridLayout>  
26.   
27.     </LinearLayout>  
28.   
29.     <LinearLayout  
30.         android:layout_width="match_parent"  
31.         android:layout_height="wrap_content"  
32.         android:orientation="vertical">  
33.   
34.         <TextView  
35.             android:layout_width="match_parent"  
36.             android:layout_height="wrap_content"  
37.             android:background="@color/colorPry"  
38.             android:text="频道管理"/>  
39.   
40.         <com.example.customview.DragGridLayout  
41.             android:id="@+id/dgl_main_bottom"  
42.             android:layout_width="match_parent"  
43.             android:layout_height="wrap_content">  
44.   
45.         </com.example.customview.DragGridLayout>  
46.           
47.     </LinearLayout>  
48.   
49. </LinearLayout>  

自定义GridLayout：

注释比较详细了，直接上代码，其中的一些参数，例如margin和padding，可根据项目需求，具体定制。

[java] view plain copy

1. import android.animation.LayoutTransition;  
2. import android.content.Context;  
3. import android.graphics.Rect;  
4. import android.util.AttributeSet;  
5. import android.view.DragEvent;  
6. import android.view.Gravity;  
7. import android.view.View;  
8. import android.widget.GridLayout;  
9. import android.widget.TextView;  
10.   
11. import java.util.List;  
12.   
13. /** 
14.  * Created by ZLM on 2017/4/3. 
15.  */  
16.   
17. public class DragGridLayout extends GridLayout {  
18.   
19.     private boolean ableDrag;  
20.     private Rect[] rects;  
21.     private View dragView;  
22.     private OnItemClickListener itemClickListener;  
23.   
24.     //拖拽监听  
25.     private View.OnDragListener odl = new View.OnDragListener() {  
26.         @Override  
27.         public boolean onDrag(View view, DragEvent dragEvent) {  
28.             switch (dragEvent.getAction()) {  
29.                 case DragEvent.ACTION_DRAG_STARTED:  
30.                     //当拖拽事件产生时，给每个子控件创建出对应的矩形  
31.                     initRects();  
32.                     break;  
33.                 case DragEvent.ACTION_DRAG_LOCATION:  
34.                     //当手指移动时，判断当前进入了哪一个子控件范围内，并返回对应子控件的索引  
35.                     int touchIndex = getTouchIndex(dragEvent);  
36.                     if (touchIndex > -1 && dragView != null && dragView != DragGridLayout.this.getChildAt(touchIndex)) {  
37.                         //先把拖拽的view从当前位置删除，再添加到touchIndex上  
38.                         DragGridLayout.this.removeView(dragView);  
39.                         DragGridLayout.this.addView(dragView, touchIndex);  
40.                     }  
41.                     break;  
42.                 case DragEvent.ACTION_DRAG_ENDED:  
43.                     if (dragView != null) {  
44.                         dragView.setEnabled(true);  
45.                     }  
46.                     break;  
47.                 default:  
48.                     break;  
49.             }  
50.             return true;  
51.         }  
52.     };  
53.     //长按监听  
54.     private View.OnLongClickListener olcl = new View.OnLongClickListener() {  
55.         @Override  
56.         public boolean onLongClick(View view) {  
57.             //长按事件发生时，即给dragView赋值  
58.             dragView = view;  
59.             //拖拽事件  
60.             view.startDrag(null, new View.DragShadowBuilder(view), null, 0);  
61.             view.setEnabled(false);  
62.             return false;  
63.         }  
64.     };  
65.   
66.   
67.     private int getTouchIndex(DragEvent dragEvent) {  
68.         for (int i = 0; i < rects.length; i++) {  
69.             Rect rect = rects[i];  
70.             if (rect.contains((int) dragEvent.getX(), (int) dragEvent.getY())) {  
71.                 return i;  
72.             }  
73.         }  
74.         return -1;  
75.     }  
76.   
77.     //创建子控件对应的矩形  
78.     private void initRects() {  
79.         //给容器中的每一个子控件都新建一个矩形  
80.         rects = new Rect[getChildCount()];  
81.         for (int i = 0; i < getChildCount(); i++) {  
82.             View childAt = getChildAt(i);  
83.             rects[i] = new Rect(childAt.getLeft(), childAt.getTop(), childAt.getRight(), childAt.getBottom());  
84.         }  
85.     }  
86.   
87.     public DragGridLayout(Context context) {  
88.         this(context, null);  
89.     }  
90.   
91.     public DragGridLayout(Context context, AttributeSet attrs) {  
92.         super(context, attrs);  
93.         setColumnCount(4);  
94.         setLayoutTransition(new LayoutTransition());  
95.     }  
96.   
97.     //定义方法，由外部传递一个栏目的数据集合进来，在这里根据数据集合动态创建表格界面  
98.     public void setItems(List<String> items) {  
99.         for (String item : items) {  
100.             addItem(item);  
101.         }  
102.     }  
103.   
104.     //定义方法，设置是否允许拖拽  
105.     public void setEnableDrag(boolean EnableDrag) {  
106.         ableDrag = EnableDrag;  
107.         if (ableDrag) {  
108.             setOnDragListener(odl);  
109.         } else {  
110.             setOnDragListener(null);  
111.         }  
112.     }  
113.   
114.     //定义接口回调  
115.     public interface OnItemClickListener {  
116.         public void onItemClick(TextView tv);  
117.     }  
118.   
119.     public void setOnItemClickListener(OnItemClickListener listener) {  
120.         this.itemClickListener = listener;  
121.     }  
122.   
123.     public void addItem(String item) {  
124.         TextView tv = getNewTextView();  
125.         tv.setText(item);  
126.         this.addView(tv);  
127.     }  
128.   
129.     //定义方法，外部传入子条目的背景资源Id,外边距margin（px）,tv内边距padding（px）  
130.     private final float scale = getContext().getResources().getDisplayMetrics().density;  
131.     private int resId;  
132.     private int margin;  
133.     private int padding;  
134.   
135.     public void setResource(int ResourceId, int margin, int padding) {  
136.         this.resId = ResourceId;  
137.         this.margin = (int) (margin * scale + 0.5f);  
138.         this.padding = (int) (padding * scale + 0.5f);  
139.     }  
140.   
141.   
142.     public TextView getNewTextView() {  
143.   
144.         GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();  
145.         layoutParams.width = getResources().getDisplayMetrics().widthPixels / 4 - 2 * margin;  
146.         layoutParams.height = GridLayout.LayoutParams.WRAP_CONTENT;  
147.         layoutParams.setMargins(margin, margin, margin, margin);  
148.   
149.         TextView tv = new TextView(getContext());  
150.         tv.setLayoutParams(layoutParams);  
151.         tv.setGravity(Gravity.CENTER);  
152.         tv.setBackgroundResource(resId);  
153.         tv.setPadding(padding, padding, padding, padding);  
154.   
155.         if (ableDrag) {  
156.             tv.setOnLongClickListener(olcl);  
157.         } else {  
158.             tv.setOnLongClickListener(null);  
159.         }  
160.   
161.         tv.setOnClickListener(new OnClickListener() {  
162.             @Override  
163.             public void onClick(View view) {  
164.                 if (itemClickListener != null) {  
165.                     itemClickListener.onItemClick((TextView) view);  
166.                 }  
167.             }  
168.         });  
169.         return tv;  
170.     }  
171. }  

drawable/selector_textbg.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_enabled="true" android:drawable="@drawable/shape_textbg_nomal"/>  
4.     <item android:state_enabled="false" android:drawable="@drawable/shape_textbg_pressed"/>  
5.   
6. </selector>  

drawable/shape_textbg_nomal.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <stroke android:width="1dp" android:color="@color/colorBlack"/>  
4.     <corners android:radius="@dimen/dp8"/>  
5.     <solid android:color="@color/colorWhite"/>  
6. </shape>  

drawable/shape_textbg_pressed.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <stroke android:width="1dp"  
4.             android:dashWidth="2dp"  
5.             android:dashGap="3dp"  
6.             android:color="@color/colorRed"/>  
7.     <corners android:radius="@dimen/dp8"/>  
8.     <solid android:color="@color/colorWhite"/>  
9. </shape>