您的位置: 首页  >  文章  >  Android 自定义GridLayout实现频道管理

Android 自定义GridLayout实现频道管理

分类: 文章 • 2025-04-17 09:21:16

Android 自定义GridLayout实现频道管理

标签： android****gridviewGridLayout
2017-04-03 22:18 903人阅读 评论(1) 收藏 举报
Android 自定义GridLayout实现频道管理分类：

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

前言

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

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

功能

Android 自定义GridLayout实现频道管理Android 自定义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> 

相关推荐