新聞頻道管理的炫酷實現

自定義GridLayout控件，可以在新聞咨詢類APP中的管理頁面使用到，也可以應用在類別管理中，總之，可以幫助我們設計更加規范和炫酷的手機頁面。

新聞類app是最常見的應用之一，而頻道管理又是其必不可少的功能，該自定義控件不僅可以帶我們實現炫酷的頻道管理功能，還可以讓我們學習如何使用Android拖拽框架實現我們想要的多種功能，以及讓我們對自定義控件會有更多的理解。

知識點

GridLayout的使用

• 從Google官方文檔學習GridLayout的功能以及用法
• 使用GridLayout實現子控件排列顯示

View的拖拽功能實現

• 通過查看Google文檔，學會調用view的拖拽方法
• 拖拽事件的處理
• 使用View的拖拽框架實現實現頻道切換位置效果

自定義GridLayout控件

自定義GridLayout控件，實現拖拽功能，繼而實現頻道管理操作

Rect類的使用

使用Rect類確定被觸摸到的子控件

新聞頻道管理的多種實現

實現類似于網易新聞頻道管理有幾種方式

實現方案1：使用兩個GridView實現，這是比較早的一種解決方案，比較復雜，具體可以參考 Android 高仿 頻道管理—-網易、今日頭條、騰訊視頻

實現方案2：使用兩個RecyclerView或ListView實現，這種實現方式好于于方案1

實現方案3：使用一個RecyclerView實現，這是我目前見過的比較好的方式，貌似比網易新聞等客戶端的要流暢，具體可以參考：高仿網易新聞欄目動畫效果 、 使用ItemTouchHelper高效地實現 今日頭條 、網易新聞 的頻道排序、移動

實現方案4：使用兩個GridLayout實現，也就是本文要介紹的方式

拖拽

長按item開始拖拽

private View.OnLongClickListener longClickListener = new View.OnLongClickListener() {@Overridepublic boolean onLongClick(View v) {//長按時，開始拖拽操作，顯示出陰影//被拖拽的視圖其實就是v參數dragedView = v;v.startDrag(null, new View.DragShadowBuilder(v), null, 0);v.setEnabled(false);// v.startDragAndDrop(null, new View.DragShadowBuilder(v), null, 0);return false;}};

拖拽方法參數說明

• startDragAndDrop() api24
• startDrag(ClipData data, DragShadowBuilder shadowBuilder, Object myLocalState, int flag)

參數1：ClipData data 拖拽過程中可以transferred的數據，可以為空

參數2：DragShadowBuilder shadowBuilder，拖拽陰影效果創建者

參數3：Object myLocalState，拖拽狀態

參數4：int flag，可以控制拖拽操作的flag，未定義，傳0即可

拖拽監聽

private View.OnDragListener dragListener = new View.OnDragListener() {/*** ACTION_DRAG_STARTED:當拖拽操作執行時，就會執行一次* DragEvent.ACTION_DRAG_ENDED：當拖拽事件結束，手指抬起時，就是執行一次* DragEvent.ACTION_DRAG_ENTERED：當手指進入設置了拖拽監聽的控件范圍內的瞬間執行一次* DragEvent.ACTION_DRAG_EXITED：當手指離開設置了拖拽監聽的控件范圍內的瞬間執行一次* DragEvent.ACTION_DRAG_LOCATION：當手指在設置了拖拽監聽的控件范圍內，移動時，實時會執行，執行N次* DragEvent.ACTION_DROP：當手指在設置了拖拽監聽的控件范圍內松開時，執行一次*** @param v 當前監聽拖拽事件的view(其實就是mGridLayout)* @param event 拖拽事件* @return*/@Overridepublic boolean onDrag(View v, DragEvent event) {String dragEventAction = getDragEventAction(event);System.out.println(dragEventAction);// Rect rect = new Rect();// rect.contains()switch (event.getAction()) {//當拖拽事件開始時，創建出與子控件對應的矩形數組case DragEvent.ACTION_DRAG_STARTED:initRects();break;case DragEvent.ACTION_DRAG_LOCATION://手指移動時，實時判斷觸摸是否進入了某一個子控件int touchIndex = getTouchIndex(event);//說明觸摸點進入了某一個子控件,判斷被拖拽的視圖與進入的子控件對象不是同一個的時候才進行刪除添加操作if (touchIndex > -1&&dragedView != null&&dragedView != mGridLayout.getChildAt(touchIndex)) {mGridLayout.removeView(dragedView);mGridLayout.addView(dragedView,touchIndex);}break;case DragEvent.ACTION_DRAG_ENDED://拖拽事件結束后，讓被拖拽的view設置為可用，否則背景變紅，并且長按事件會失效if (dragedView != null) {dragedView.setEnabled(true);}break;}return true;}};

DragEvent

拖拽事件說明

ACTION_DRAG_STARTED	當拖拽操作執行時，就會執行一次
DragEvent.ACTION_DRAG_ENDED	當拖拽事件結束，手指抬起時，就是執行一次
DragEvent.ACTION_DRAG_ENTERED	當手指進入設置了拖拽監聽的控件范圍內的瞬間執行一次
DragEvent.ACTION_DRAG_EXITED	當手指離開設置了拖拽監聽的控件范圍內的瞬間執行一次
DragEvent.ACTION_DRAG_LOCATION	當手指在設置了拖拽監聽的控件范圍內，移動時，實時會執行，執行N次
DragEvent.ACTION_DROP	當手指在設置了拖拽監聽的控件范圍內松開時，執行一次

當拖拽事件開始時，創建出與子控件對應的矩形數組

private Rect[] mRects;private void initRects() {mRects = new Rect[mGridLayout.getChildCount()];for (int i = 0; i < mGridLayout.getChildCount(); i++) {View childView = mGridLayout.getChildAt(i);//創建與每個子控件對應矩形對象Rect rect = new Rect(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());mRects[i] = rect;}}

手指移動時，實時判斷觸摸是否進入了某一個子控件

private int getTouchIndex(DragEvent event) {//遍歷所有的數組，如果包含了當前的觸摸點返回索引即可for (int i = 0; i < mRects.length; i++) {Rect rect = mRects[i];if (rect.contains((int)event.getX(), (int)event.getY())) {return i;}}return -1;}

是否允許拖拽

public void setAllowDrag(boolean allowDrag) {this.allowdrag = allowDrag;if (this.allowdrag) {this.setOnDragListener(odl);} else {this.setOnDragListener(null);}}

設置列數和動畫

//初始化方法 private void init() {// android:columnCount="4"// android:animateLayoutChanges="true"this.setColumnCount(columnCount);this.setLayoutTransition(new LayoutTransition()); }

DragGridlayout

public class DragGridlayout extends GridLayout{private static final int columnCount = 4;//列數private boolean isAllowDrag;//記錄當前控件是否可以進行拖拽操作public DragGridlayout(Context context) {this(context,null);}public DragGridlayout(Context context, AttributeSet attrs) {this(context, attrs,0);}public DragGridlayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}/* static SparseArray<String> dragEventType = new SparseArray<>();static{dragEventType.put(DragEvent.ACTION_DRAG_STARTED, "STARTED");dragEventType.put(DragEvent.ACTION_DRAG_ENDED, "ENDED");dragEventType.put(DragEvent.ACTION_DRAG_ENTERED, "ENTERED");dragEventType.put(DragEvent.ACTION_DRAG_EXITED, "EXITED");dragEventType.put(DragEvent.ACTION_DRAG_LOCATION, "LOCATION");dragEventType.put(DragEvent.ACTION_DROP, "DROP");}public static String getDragEventAction(DragEvent de){return dragEventType.get(de.getAction());}*///初始化方法private void init() {// android:columnCount="4"// android:animateLayoutChanges="true"this.setColumnCount(columnCount);this.setLayoutTransition(new LayoutTransition());}public void setItems(List<String> items) {for (String item : items) {addItem(item);}}public void addItem(String content, int index) {TextView tv = newItemView();tv.setText(content);addView(tv,index);}public void addItem(String content) {TextView tv = newItemView();tv.setText(content);addView(tv);}private TextView newItemView() {TextView tv = new TextView(getContext());int margin = dip2px(5);tv.setBackgroundResource(R.drawable.selector_tv_bg);GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();layoutParams.width = getResources().getDisplayMetrics().widthPixels/4 - 2*margin;//寬為屏幕寬的4分之一layoutParams.height = dip2px(25);layoutParams.setMargins(margin,margin,margin,margin);tv.setGravity(Gravity.CENTER);tv.setLayoutParams(layoutParams);if (isAllowDrag) {//給條目設置長按點擊事件tv.setOnLongClickListener(mLongClickListener);} else {tv.setOnLongClickListener(null);}//設置條目的點擊事件tv.setOnClickListener(onClickListener);return tv;}/** dip轉換px */public int dip2px(int dip) {final float scale = getResources().getDisplayMetrics().density;return (int) (dip * scale + 0.5f);}private View dragedView;//被拖拽的視圖private View.OnLongClickListener mLongClickListener = new View.OnLongClickListener() {@Overridepublic boolean onLongClick(View v) {//長按時，開始拖拽操作，顯示出陰影//被拖拽的視圖其實就是v參數dragedView = v;v.startDrag(null, new View.DragShadowBuilder(v), null, 0);v.setEnabled(false);//v.startDragAndDrop(null, new View.DragShadowBuilder(v), null, 0); // api24return true;}};private OnClickListener onClickListener = new OnClickListener() {@Overridepublic void onClick(View v) {if(onDragItemClickListener != null){onDragItemClickListener.onDragItemClick((TextView) v);}}};public void setAllowDrag(boolean isAllowDrag) {this.isAllowDrag = isAllowDrag;if (this.isAllowDrag) {this.setOnDragListener(mDragListener);} else {this.setOnDragListener(null);}}private View.OnDragListener mDragListener = new View.OnDragListener() {/*** ACTION_DRAG_STARTED:當拖拽操作執行時，就會執行一次* DragEvent.ACTION_DRAG_ENDED：當拖拽事件結束，手指抬起時，就是執行一次* DragEvent.ACTION_DRAG_ENTERED：當手指進入設置了拖拽監聽的控件范圍內的瞬間執行一次* DragEvent.ACTION_DRAG_EXITED：當手指離開設置了拖拽監聽的控件范圍內的瞬間執行一次* DragEvent.ACTION_DRAG_LOCATION：當手指在設置了拖拽監聽的控件范圍內，移動時，實時會執行，執行N次* DragEvent.ACTION_DROP：當手指在設置了拖拽監聽的控件范圍內松開時，執行一次** @param v 當前監聽拖拽事件的view(其實就是mGridLayout)* @param event 拖拽事件* @return*/@Overridepublic boolean onDrag(View v, DragEvent event) {switch (event.getAction()) {//當拖拽事件開始時，創建出與子控件對應的矩形數組case DragEvent.ACTION_DRAG_STARTED:initRects();break;case DragEvent.ACTION_DRAG_LOCATION://手指移動時，實時判斷觸摸是否進入了某一個子控件int touchIndex = getTouchIndex(event);//說明觸摸點進入了某一個子控件,判斷被拖拽的視圖與進入的子控件對象不是同一個的時候才進行刪除添加操作if (touchIndex > -1 && dragedView != null && dragedView != DragGridlayout.this.getChildAt(touchIndex)) {DragGridlayout.this.removeView(dragedView);DragGridlayout.this.addView(dragedView,touchIndex);}break;case DragEvent.ACTION_DRAG_ENDED://拖拽事件結束后，讓被拖拽的view設置為可用，否則背景變紅，并且長按事件會失效if (dragedView != null) {dragedView.setEnabled(true);}break;}return true;}};//手指移動時，實時判斷觸摸是否進入了某一個子控件private int getTouchIndex(DragEvent event) {//遍歷所有的數組，如果包含了當前的觸摸點返回索引即可for (int i = 0; i < mRects.length; i++) {Rect rect = mRects[i];if (rect.contains((int)event.getX(), (int)event.getY())) {return i;}}return -1;}//當拖拽事件開始時，創建出與子控件對應的矩形數組private Rect[] mRects;private void initRects() {mRects = new Rect[this.getChildCount()];for (int i = 0; i < this.getChildCount(); i++) {View childView = this.getChildAt(i);//創建與每個子控件對應矩形對象Rect rect = new Rect(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());mRects[i] = rect;}}private OnDragItemClickListener onDragItemClickListener;public interface OnDragItemClickListener{public void onDragItemClick(TextView tv);}public void setOnDragItemClickListener(OnDragItemClickListener onDragItemClickListener) {this.onDragItemClickListener = onDragItemClickListener;} }

MainActivity

布局文件

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:id="@+id/activity_main"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><Button android:layout_width="match_parent"android:layout_height="36dp"android:gravity="center_vertical"android:onClick="addItem"android:text="添加條目"android:textColor="?android:attr/textColorPrimary"/><com.github.draggridlayout.DragGridlayout android:id="@+id/selectedChannel"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:layout_marginTop="16dp"/><TextView android:id="@+id/textView"android:layout_width="match_parent"android:layout_height="36dp"android:background="?attr/colorButtonNormal"android:gravity="center_vertical"android:padding="5dp"android:text="點擊選擇頻道"android:textColor="?android:attr/textColorPrimary"/><com.github.draggridlayout.DragGridlayout android:id="@+id/unSelectedChannel"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="16dp"/></LinearLayout></android.support.v4.widget.NestedScrollView>

代碼實現

public class MainActivity extends AppCompatActivity {private DragGridlayout mSelectedChannel;private DragGridlayout mUnSelectedChannel;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);initViews();initData();initEvent();}private void initViews() {setContentView(R.layout.activity_main);mSelectedChannel = (DragGridlayout) findViewById(R.id.selectedChannel);mUnSelectedChannel = (DragGridlayout) findViewById(R.id.unSelectedChannel);mSelectedChannel.setAllowDrag(true);mUnSelectedChannel.setAllowDrag(true);}private void initData() {List<String> selectedChannel = new ArrayList<>();selectedChannel.add("頭條");...mSelectedChannel.setItems(selectedChannel);List<String> unSelectedChannel = new ArrayList<>();unSelectedChannel.add("NBA");...mUnSelectedChannel.setItems(unSelectedChannel);}public void initEvent(){//設置條目點擊監聽mSelectedChannel.setOnDragItemClickListener(new DragGridlayout.OnDragItemClickListener() {@Overridepublic void onDragItemClick(TextView tv) {//移除點擊的條目，把條目添加到下面的GridlayoutmSelectedChannel.removeView(tv);//移除是需要時間,不能直接添加mUnSelectedChannel.addItem(tv.getText().toString(),0);}});mUnSelectedChannel.setOnDragItemClickListener(new DragGridlayout.OnDragItemClickListener() {@Overridepublic void onDragItemClick(TextView tv) {//移除點擊的條目，把條目添加到上面的GridlayoutmUnSelectedChannel.removeView(tv);//移除是需要時間,不能直接添加mSelectedChannel.addItem(tv.getText().toString());}});}private int index = 0;public void addItem(View view) {mSelectedChannel.addItem("頻道" + index++,0);}}

源代碼

https://github.com/JackChan1999/DragGridLayout

總結

以上是生活随笔為你收集整理的新闻频道管理的炫酷实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。