2. 程式人生 > >Android 仿今日頭條頻道管理（上）（GridView之間Item的移動和拖拽）

Android 仿今日頭條頻道管理（上）（GridView之間Item的移動和拖拽）

阿新 • • 發佈：2019-01-19

前言

經常逛今日頭條、發現它的頻道管理功能做的特別贊，互動體驗非常好、如圖：


它是2個gridview組成、2個gridview之間的Item是可以相互更換的、而且我的頻道的Item是可以拖拽進行排序。仔細觀察、今日頭條有些細節做的的非常好，當一個gridview1的item移動到另一個gridview2時、gridview1的item不會立即消失、而是有一個沒有內容的背景框、等item移動gridview2操作完畢才會消失、並且gridview2在gridview1的Item到達之前也有一個沒有內容的背景框，等到達後覆蓋。給使用者一個很強的互動體驗，很贊。而且在item拖拽移動排序時、拖拽的item會變大變色、效果很贊，體驗極好。感興趣的話可以下一個今日頭條的客戶端看看。當看到這麼讚的互動體驗，我就想看看是怎麼實現的，這篇部落格先講2個Gridview之間item的移動，下一篇在帶來gridview的拖拽排序。

實現思路

要實現2個gridview之間的Item相互移動：

1、首先我們獲取我們點選的位置、處於gridview哪個位置

2、獲取位置後、我們就能拿到這個Item的View，我們獲取item繪製快取的Bitmap物件。

3、將Bitmap設定的一個Imageview上，然後將這個ImageView放到一個容器中去進行移動操作，這樣可能有人有疑問，為什麼不直接把item放到容器中去呢，是因為item已經有自己的父容器gridview，所以我們new一個Imageview來代替item

4、然後我們將imageview移動到另一個gridview的最後一個位置。

5、最後重新整理2個gridview的檢視、就能實現我們所見的效果。

實現程式碼

主程式程式碼：

  1. package com.test.drag;  
  2. import android.graphics.Bitmap;  
  3. import android.os.Bundle;  
  4. import android.os.Handler;  
  5. import android.support.v7.app.AppCompatActivity;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.view.animation.Animation;  
  9. import android.view.animation.AnimationSet;  
  10. import android.view.animation.TranslateAnimation;  
  11. import android.widget.AdapterView;  
  12. import android.widget.AdapterView.OnItemClickListener;  
  13. import android.widget.GridView;  
  14. import android.widget.ImageView;  
  15. import android.widget.LinearLayout;  
  16. import android.widget.TextView;  
  17. import com.test.drag.view.MyGridView;  
  18. import java.util.ArrayList;  
  19. import java.util.List;  
  20. public class MainActivity extends AppCompatActivity implements OnItemClickListener {  
  21.     private MyGridView mUserGv, mOtherGv;  
  22.     private List<String>mUserList = new ArrayList<>();  
  23.     private List<String>mOtherList = new ArrayList<>();  
  24.     private OtherAdapter mUserAdapter, mOtherAdapter;  
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.activity_main);  
  29.         initView();  
  30.     }  
  31.     public void initView() {  
  32.         mUserGv = (MyGridView) findViewById(R.id.userGridView);  
  33.         mOtherGv = (MyGridView) findViewById(R.id.otherGridView);  
  34.         mUserList.add("推薦");  
  35.         mUserList.add("熱點");  
  36.         mUserList.add("上海");  
  37.         mUserList.add("時尚");  
  38.         mUserList.add("科技");  
  39.         mUserList.add("體育");  
  40.         mUserList.add("軍事");  
  41.         mUserList.add("財經");  
  42.         mUserList.add("網路");  
  43.         mOtherList.add("汽車");  
  44.         mOtherList.add("房產");  
  45.         mOtherList.add("社會");  
  46.         mOtherList.add("情感");  
  47.         mOtherList.add("女人");  
  48.         mOtherList.add("旅遊");  
  49.         mOtherList.add("健康");  
  50.         mOtherList.add("美女");  
  51.         mOtherList.add("遊戲");  
  52.         mOtherList.add("數碼");  
  53.         mOtherList.add("娛樂");  
  54.         mOtherList.add("探索");  
  55.         mUserAdapter = new OtherAdapter(this, mUserList,true);  
  56.         mOtherAdapter = new OtherAdapter(this, mOtherList,false);  
  57.         mUserGv.setAdapter(mUserAdapter);  
  58.         mOtherGv.setAdapter(mOtherAdapter);  
  59.         mUserGv.setOnItemClickListener(this);  
  60.         mOtherGv.setOnItemClickListener(this);  
  61.     }  
  62.     /**  
  63.      *獲取點選的Item的對應View，  
  64.      *因為點選的Item已經有了自己歸屬的父容器MyGridView，所有我們要是有一個ImageView來代替Item移動  
  65.      * @param view  
  66.      * @return  
  67.      */  
  68.     private ImageView getView(View view) {  
  69.         view.destroyDrawingCache();  
  70.         view.setDrawingCacheEnabled(true);  
  71.         Bitmap cache = Bitmap.createBitmap(view.getDrawingCache());  
  72.         view.setDrawingCacheEnabled(false);  
  73.         ImageView iv = new ImageView(this);  
  74.         iv.setImageBitmap(cache);  
  75.         return iv;  
  76.     }  
  77.     /**  
  78.      * 獲取移動的VIEW，放入對應ViewGroup佈局容器  
  79.      * @param viewGroup  
  80.      * @param view  
  81.      * @param initLocation  
  82.      * @return  
  83.      */  
  84.     private View getMoveView(ViewGroup viewGroup, View view, int[] initLocation) {  
  85.         int x = initLocation[0];  
  86.         int y = initLocation[1];  
  87.         viewGroup.addView(view);  
  88.         LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  
  89.         mLayoutParams.leftMargin = x;  
  90.         mLayoutParams.topMargin = y;  
  91.         view.setLayoutParams(mLayoutParams);  
  92.         return view;  
  93.     }  
  94.     /**  
  95.      * 建立移動的ITEM對應的ViewGroup佈局容器  
  96.      * 用於存放我們移動的View  
  97.      */  
  98.     private ViewGroup getMoveViewGroup() {  
  99.         //window中最頂層的view  
  100.         ViewGroup moveViewGroup = (ViewGroup) getWindow().getDecorView();  
  101.         LinearLayout moveLinearLayout = new LinearLayout(this);  
  102.         moveLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));  
  103.         moveViewGroup.addView(moveLinearLayout);  
  104.         return moveLinearLayout;  
  105.     }  
  106.     /**  
  107.      * 點選ITEM移動動畫  
  108.      *  
  109.      * @param moveView  
  110.      * @param startLocation  
  111.      * @param endLocation  
  112.      * @param moveChannel  
  113.      * @param clickGridView  
  114.      */  
  115.     private void MoveAnim(View moveView, int[] startLocation, int[] endLocation, final String moveChannel,  
  116.                           final GridView clickGridView, final boolean isUser) {  
  117.         int[] initLocation = new int[2];  
  118.         //獲取傳遞過來的VIEW的座標  
  119.         moveView.getLocationInWindow(initLocation);  
  120.         //得到要移動的VIEW,並放入對應的容器中  
  121.         final ViewGroup moveViewGroup = getMoveViewGroup();  
  122.         final View mMoveView = getMoveView(moveViewGroup, moveView, initLocation);  
  123.         //建立移動動畫  
  124.         TranslateAnimation moveAnimation = new TranslateAnimation(  
  125.                 startLocation[0], endLocation[0], startLocation[1],  
  126.                 endLocation[1]);  
  127.         moveAnimation.setDuration(300L);//動畫時間  
  128.         //動畫配置  
  129.         AnimationSet moveAnimationSet = new AnimationSet(true);  
  130.         moveAnimationSet.setFillAfter(false);//動畫效果執行

相關推薦

Android 仿今日頭條頻道管理（上）（GridView之間Item的移動和拖拽）

前言 經常逛今日頭條、發現它的頻道管理功能做的特別贊，互動體驗非常好、如圖： 它是2個gridview組成、2個gridview之間的Item是可以相互更換的、而且我的頻道的Item是可以拖拽進行排序。仔細觀察、今日頭條有些細節做的的非常好，當一個gridview1的item移

使用 draggrid 實現 仿今日頭條頻道管理(詳細步驟）

package com.bawei.newsapp; import android.content.Intent; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.ann

仿今日頭條頻道管理

package com.example.pingdao; import java.io.ByteArrayOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import

今日頭條頻道管理細緻程式碼

//佈局點選進入頻道管理頁面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android仿今日頭條App、多種漂亮載入效果、選擇器彙總、記事本App、Kotlin開發等原始碼

Android精選原始碼 android漂亮的載入效果 android各種 選擇器 彙總原始碼 Android仿bilibili搜尋框效果 Android記事本app、分類，塗鴉、新增圖片或者其他附件 仿今日頭條app 一個很酷的Vi

Android仿今日頭條首頁的頂部標籤欄和底部導航欄

//主頁 public class MainActivity extends AppCompatActivity implements View.OnClickListener { //初始化fragment private HomePageFragment mHomePageFragment; pr

Android 仿今日頭條首頁標題欄效果

今天帶來的是仿今日頭條首頁的聯動滑動效果，廢話不多說，先上效果圖： 思路： 做這個我們需要實現的效果有 1、滑動內容區域，標題欄會有變化來顯示當前所處的位置。 2、點選標題欄，內容區域也會隨著滑動並跳到指定欄，標題欄會移動到螢幕中間。 3、當標題欄

android仿今日頭條下拉重新整理中的vector動畫

一直有留意到今日頭條下拉重新整理的效果, 真的很贊,在學習了svg drawable相關資料後, 參考部落格http://blog.csdn.net/u012950099/article/details/52040028完成了今日頭條下拉重新整理中的動畫, 首先看下效果圖:

燈燈小程式開發手記：仿今日頭條（上）

寫在前面 新的一年，祝大家新年快樂！當然對於程式設計師來說，新的一年，也要有新的改變。因此燈燈決定湊熱鬧編寫微信小程式啦！ 上一篇文章《記一次小程式開發過程》中，燈燈大致寫了下自己第一次開發小程式的感受和流程。這一次燈燈會詳細記錄下自己製作一個小程式的思路、遇到的問題

android高仿今日頭條小視訊轉場切換效果

可以先看看今日頭條效果 功能分析 點選列表上的一個item，該item會放大，最後直接全屏播放小視訊，剛開始看上去，以為是個共享元素的轉場動畫， 後來想到，共享元素要在android 5.0以上支援,而今日頭條顯然不會只支援5.0版本以上 筆者想到的一種方案就是進入Acti

React實戰篇（React仿今日頭條）

前言 上次初學用 react 寫了個後臺管理，這次便尋思寫個移動端的專案。便有了這次的這個專案。 這個專案以前寫了個 vue 的版本。有興趣的可以 點選進入 賬號: vue-toutiao 密碼： 123456 技術棧 react + react-redu

Android之仿今日頭條頂部導航欄效果

隨著時間的推移現在的軟體要求顯示的內容越來越多，所以要在小的螢幕上能夠更好的顯示更多的內容，首先我們會想到底部選單欄，但是有時候像今日頭條新聞客戶端要顯示的內容太多，而且又想在主介面全部顯示出來，所以有加了頂部導航欄。 今日頭條頂部導航欄區域的主要部分是一個導航選單。導航選

微信小程式開發-仿今日頭條（二）

（本小程式是模仿新聞類的app做的一個小程式） 在此特別感謝： 有夢想的程式丶猿 提供的免費開放介面API 本次版本更新內容如下：v0.0.38

燈燈小程式開發手記：仿今日頭條（下）

接著上一篇 下拉重新整理、無限載入評論顯示收藏功能 　說明下為什麼不做收藏功能，其實是設計到使用者登陸功能暫時都不做了，包括髮表評論。原因： 微信小程式登陸需要有appid，appid需要公司資質去申請，每個公司申請的數量有限制（好像是30個），每個身份證也只能最多繫

Android之高仿今日頭條、網易新聞首頁動態改變tab

前言： 專案需要一個類似今日頭條或者網易新聞首頁動態改變tab（頻道欄目）的功能，進過一番折騰，目前已實現該功能。 先看看效果圖： 思路： 1，關於tab欄目橫著滑動功能控制元件的選擇，這裡我採用的Horizontal

iOS新聞應用源碼，高仿今日頭條源碼等

http watch 如何 簡單的 ios開發 優酷 語言 bae calayer iOS精選源碼 城市列表選擇 一款非常時尚的照片選擇插件 優酷播放按鈕動畫 BRPickerView是iOS的選擇器組件，主要包括：日期選擇器、時... 選擇位置坐下動畫Demo

仿今日頭條按鈕loading效果

out otc ren pro pla radius -s ont blog 效果 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

2018春招-今日頭條筆試題-第三題（python）

font val gpo -s nbsp blog eva 字符 今日頭條 題目描述：2018春招-今日頭條筆試題5題（後附大佬答案-c++版） 解題思路： 本題的做法最重要的應該是如何拼出‘1234567890’，對於輸入表達試獲得對應的結果利用python內置函數eva

仿今日頭條遇到的問題

1，使用 MultiDexApplication 詳情查部落格：https://blog.csdn.net/k1457047898/article/details/53467238 2.Android啟動另一個應用(只需知道package name)  ，詳情見部落格地址：http

viewpagerindacator仿今日頭條

api的話建議獨自申請一個，我申請的是聚合資料的新聞的介面，免費的但是隻能用兩個月 1.       首先準備csdn-XListView，viewpagerindacator（只需要其中的library）的類庫,Gson.jar,