2. 程式人生 > >Android -- 自定義實現橫豎雙向滾動的列表（ListView）佈局

Android -- 自定義實現橫豎雙向滾動的列表（ListView）佈局

阿新 • • 發佈：2019-02-09 
public class CustomHScrollView extends HorizontalScrollView {

    ScrollViewObserver mScrollViewObserver = new ScrollViewObserver();

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

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

    public CustomHScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        //滾動時通知觀察者
        if (mScrollViewObserver != null) {
            mScrollViewObserver.NotifyOnScrollChanged(l, t, oldl, oldt);
        }
        super.onScrollChanged(l, t, oldl, oldt);
    }

    /*
     * 當發生了滾動事件時介面，供外部訪問
     */
    public static interface OnScrollChangedListener {
        public void onScrollChanged(int l, int t, int oldl, int oldt);
    }

    /*
     * 新增滾動事件監聽
     * */
    public void AddOnScrollChangedListener(OnScrollChangedListener listener) {
        mScrollViewObserver.AddOnScrollChangedListener(listener);
    }

    /*
     * 移除滾動事件監聽
     * */
    public void RemoveOnScrollChangedListener(OnScrollChangedListener listener) {
        mScrollViewObserver.RemoveOnScrollChangedListener(listener);
    }
    /*
     * 滾動觀察者
     */
    public static class ScrollViewObserver {
        List<OnScrollChangedListener> mChangedListeners;

        public ScrollViewObserver() {
            super();
            mChangedListeners = new ArrayList<OnScrollChangedListener>();
        }
        //新增滾動事件監聽
        public void AddOnScrollChangedListener(OnScrollChangedListener listener) {
            mChangedListeners.add(listener);
        }
        //移除滾動事件監聽
        public void RemoveOnScrollChangedListener(OnScrollChangedListener listener) {
            mChangedListeners.remove(listener);
        }
        //通知
        public void NotifyOnScrollChanged(int l, int t, int oldl, int oldt) {
            if (mChangedListeners == null || mChangedListeners.size() == 0) {
                return;
            }
            for (int i = 0; i < mChangedListeners.size(); i++) {
                if (mChangedListeners.get(i) != null) {
                    mChangedListeners.get(i).onScrollChanged(l, t, oldl, oldt);
                }
            }
        }
    }
}

實現圖中的效果最重要的是如何讓資料行與標題行保持同時同向滑動，由上面的程式碼可以看出，我定義了一個滾動觀察者，用於監聽滾動事件，每次滾動事件的觸發（包括標題頭和資料行每一行的滾動）都會通知給觀察者，之後觀察者再通知給它的訂閱者，保持滾動的一致性。程式碼中都有註釋，一目瞭然。 3、出此之外還要自定義一個攔截onTouch事件的佈局 
public class InterceptScrollLinearLayout extends LinearLayout {

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

    public InterceptScrollLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return true;
    }
}

關鍵程式碼就是上面這兩個自定義類 來看MainActivity，只貼部分關鍵程式碼 
public class MainActivity extends AppCompatActivity {

    private RelativeLayout mHead;//標題頭
    private ListView mListView;
    private List<TestData> mDataList;
    private ListViewAdapter mAdapter;
    CustomHScrollView mScrollView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        initView();
        initData();
    }

    private void initView(){
        mListView = (ListView) findViewById(R.id.list_view);
        mScrollView = (CustomHScrollView) findViewById(R.id.h_scrollView);
        mHead = (RelativeLayout) findViewById(R.id.head_layout);
        mHead.setBackgroundResource(R.color.colorAccent);
        mHead.setFocusable(true);
        mHead.setClickable(true);
        mHead.setOnTouchListener(new MyTouchLinstener());
        mListView.setOnTouchListener(new MyTouchLinstener());
    }

    /**
     * 載入資料
     */
    private void initData(){
        mDataList = new ArrayList<>();
        TestData data = null;
        for (int i = 1; i <= 100; i++) {
            data = new TestData();
            data.setText1("第"+i+"行-1");
            data.setText2("第"+i+"行-2");
            data.setText3("第"+i+"行-3");
            data.setText4("第"+i+"行-4");
            data.setText5("第"+i+"行-5");
            data.setText6("第"+i+"行-6");
            data.setText7("第"+i+"行-7");
            mDataList.add(data);
        }
        setData();
    }

    private void setData(){
        mAdapter = new ListViewAdapter(this, mDataList, mHead);
        mListView.setAdapter(mAdapter);
    }

    class MyTouchLinstener implements View.OnTouchListener {

        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            //當在表頭和listView控制元件上touch時，將事件分發給 ScrollView
            HorizontalScrollView headSrcrollView = (HorizontalScrollView) mHead.findViewById(R.id.h_scrollView);
            headSrcrollView.onTouchEvent(arg1);
            return false;
        }
    }

    //...............
}

再看介面卡 
public class ListViewAdapter extends BaseAdapter {

    private Context mContext;
    private List<TestData> mList;
    private LayoutInflater mInflater;
    private RelativeLayout mHead;

    public ListViewAdapter(Context context, List<TestData> list, RelativeLayout head) {
        this.mContext = context;
        this.mList = list;
        this.mHead = head;
        this.mInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public Object getItem(int i) {
        return mList.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup group) {
        MyViewHolder holder = null;
        if (view == null){
            view = mInflater.inflate(R.layout.list_item, group, false);
            holder = new MyViewHolder();
            CustomHScrollView scrollView = (CustomHScrollView) view.findViewById(R.id.h_scrollView);
            holder.scrollView = scrollView;
            
//..........

            CustomHScrollView headSrcrollView = (CustomHScrollView) mHead.findViewById(R.id.h_scrollView);
            //新增滾動監聽事件
            headSrcrollView.AddOnScrollChangedListener(new OnScrollChangedListenerImp(scrollView));

            view.setTag(holder);
        }else{
            holder = (MyViewHolder) view.getTag();
        }

        //.........

        return view;
    }

    class OnScrollChangedListenerImp implements CustomHScrollView.OnScrollChangedListener {
        CustomHScrollView mScrollViewArg;

        public OnScrollChangedListenerImp(CustomHScrollView scrollViewar) {
            mScrollViewArg = scrollViewar;
        }

        @Override
        public void onScrollChanged(int l, int t, int oldl, int oldt) {
            mScrollViewArg.smoothScrollTo(l, t);
           
        }
    };

    class MyViewHolder{
        //........
    }
}

對應的xml檔案 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.hbh.cl.listviewhorizontalscrolldemo.MainActivity"
    tools:showIn="@layout/activity_main">

    <include
        android:id="@+id/head_layout"
        layout="@layout/list_item"
        />

    <ListView
        android:id="@+id/list_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/head_layout"
        android:cacheColorHint="@android:color/transparent"
        android:dividerHeight="1dp"
        android:divider="@color/gray">
    </ListView>
</RelativeLayout>
list_item.xml檔案 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:descendantFocusability="blocksDescendants"
                android:orientation="horizontal"
                android:padding="5dp" >

    <TextView
        android:id="@+id/textView_1"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:maxLines="2"
        android:ellipsize="end"
        android:text="標題1"
        android:textColor="@color/black"
        android:textSize="14sp" />

    <com.hbh.cl.listviewhorizontalscrolldemo.util.InterceptScrollLinearLayout
        android:id="@+id/scroollContainter"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/textView_1"
        android:focusable="false" >

        <com.hbh.cl.listviewhorizontalscrolldemo.util.CustomHScrollView
            android:id="@+id/h_scrollView"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:focusable="false"
            android:scrollbars="none" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:focusable="false"
                android:orientation="horizontal" >

                <LinearLayout
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/textView_2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="2dp"
                        android:layout_marginRight="2dp"
                        android:text="標題2"
                        android:textColor="@color/black"
                        android:gravity="center"
                        android:textSize="14sp"
                        android:textAppearance="?android:attr/textAppearanceMedium" />

                </LinearLayout>

               <!-- ....省略...... -->
                
            </LinearLayout>
        </com.hbh.cl.listviewhorizontalscrolldemo.util.CustomHScrollView>
    </com.hbh.cl.listviewhorizontalscrolldemo.util.InterceptScrollLinearLayout>

</RelativeLayout>
好了，程式碼基本上都貼出來了，至於其他的測試資料的類就不貼了，來，現在讓我們跑一下我們的程式碼：            

OK，非常完美，一切都顯得那麼和諧。但這都只是寫死的資料，正常情況下是要通過網路請求獲取資料，然後通過介面卡展示資料的，咱們剛才的這種情況只能算是簡單的模擬了網路請求展示資料，那麼好了，我現在要重新整理資料，重新整理當前頁面的資料，ok，咱們再增加一個重新整理按鈕，點選重新整理，更新資料。 我們在MainActivity中增加一段程式碼： 
@Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        if (id == R.id.action_settings) {
            initData();//重新整理，重新載入資料
            if (mAdapter != null){
                mAdapter.notifyDataSetChanged();
            }
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

這裡我們重新執行initData()方法，模擬網路請求進行重新整理，然後呼叫Adapter的notifyDataSetChanged()方法來重新整理每個item的內容，好了，現在再來跑一下程式：
我擦，這是什麼鬼，點選重新整理之後，標題頭與資料行內容完全錯亂了，怎麼回事呢？？？這是因為在我們點選重新整理之後，Adapter呼叫notifyDataSetChanged()方法將listview中的每個item都強制重新整理，但標題頭並不是listview的一部分，所以保持原來的狀態，造成錯亂的問題。 那怎麼解決呢？？？很簡單，就是在我們點選重新整理的時候，讓標題頭（可滑動部分）回到初始狀態。 什麼意思呢？？咱們看，當我們在不向左滑動的情況下，重新整理是不會出現任何問題的，當我們向左滑動之後，再重新整理，出現了資料錯亂的問題，那麼好了，能不能在我們重新整理的時候讓標題頭回到初始位置呢？？當然可以，看程式碼 找到我們的ListViewAdapter，其中有這麼幾行程式碼： 
@Override
        public void onScrollChanged(int l, int t, int oldl, int oldt) {
            mScrollViewArg.smoothScrollTo(l, t);
            if (n == 1) {//記錄滾動的起始位置，避免因重新整理資料引起錯亂
                new MainActivity().setPosData(oldl, oldt);
            }
            n++;
        }
這個方法就是在我們左右滾動時所執行的，我們加了一個標記，記錄下第一次滾動時的位置oldl和oldt MainActivity中對應的改動： 
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        if (id == R.id.action_settings) {
            initData();//重新整理，重新載入資料
            mScrollView.smoothScrollTo(leftPos, topPos);//每次重新整理資料都讓CustomHScrollView回到初始位置，避免錯亂
            if (mAdapter != null){
                mAdapter.notifyDataSetChanged();
            }
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * 記錄CustomHScrollView的初始位置
     * @param l
     * @param t
     */
    public void setPosData(int l, int t){
        this.leftPos = l;
        this.topPos = t;
    }
我們看到，在重新整理的方法中我們增加了一行程式碼，讓CustomHScrollView回到初始位置，好了，我們現在再來執行一下程式：
         

OK，非常完美，一切又都是那麼和諧，但是……已經沒有問題了！！！ 好了，囉囉嗦嗦那麼多，可能讓你也覺得不明不白，還不如直接看原始碼來的實在。那好，原始碼雙手奉上 原始碼傳送門 如果覺得還不錯，順手給個贊，star一下吧微笑

相關推薦

Android -- 自定義實現橫豎雙向滾動的列表（ListView）佈局

public class CustomHScrollView extends HorizontalScrollView { ScrollViewObserver mScrollViewObserver = new ScrollViewObserver(); public CustomHSc

Android自定義View--翻書控制元件（一）

0.前言 最近重看了一遍封神演義，感覺QQ閱讀那個翻書的效果挺好的，準備做一個。上週五下午用了兩個小時只寫了一部分功能，以後有時間再完善 1.分析 先看效果圖 這個空間，說簡單也簡單，說難也難，簡單就在於這個效果主要就是依賴canvas的clippath才見到部分canvas，難就難在裁

Android 自定義View練習：雷達圖（比重）繪製

code： package com.louisgeek.louiscustomviewstudy; import android.content.Context; import android.content.res.Resources; import

android 自定義實現滾動View：WheelView

專案中用到一個比較覺得不錯的控制元件：WheelView，即上下滾動View。它是繼承ScrollView實現，在Android各版本上的效果都是如下：也許在git上有許多這樣功能的控制元件，但個人認為這個控制元件實現的方式簡單，比較讓人容易理解，對自定義控制元件的實現有借

Android 自定義實現日曆

開發工具AndroidStudio，使用元件GridView 實現步驟以及原理 通過Calendar獲取當前年月日 獲取指定年月的天數 得到當月一號是星期幾 獲取日期物件的列表資料：當月天數加上當

Android自定義控制元件實戰——滾動選擇器PickerView

  手機裡設定鬧鐘需要選擇時間，那個選擇時間的控制元件就是滾動選擇器，前幾天用手機刷了MIUI，發現自帶的那個時間選擇器效果挺好看的，於是就自己仿寫了一個，權當練手。先來看效果：                                              

Android 自定義實現switch開關按鈕

前幾天在看蘑菇街上有個開關按鈕： 就在想是怎樣實現的，於是反編譯了它的原始碼，但是這時得到了下面的幾張圖片： 圖片對應的名稱： 無色長條:switch_frame; 白色圓點:switch_btn_pressed;左白右紅的長條:switch_bottom;黑色長條:

Android自定義實現圓形播放進度條

自定義實現圓形播放進度條（Android，飛一般的感覺）。 廢話不多說，先上效果圖： Android提供了很多基本的控制元件實現，但不是一個完整、強大的實現。 幸運的是，Android提供了自定義控制元件的實現，有了自定義控制元件，我們就可以再Androi

Android自定義半圓形圓盤滾動選擇器View

前段時間公司專案要求做一個特效的滑動選擇器，效果如下圖的樣子： 功能要求：兩邊的半圓形轉盤可以轉動，轉盤上的圖示也一起滾動，藍紅色圖示指著的小圖示變成高亮選中狀態。 第一眼看到這個需求就想到這個必須要用自定義控制元件來做才

Android--(13)--Android自定義實現actionbar實現微信標題欄

昨天看了下actionbar的使用,今天來實現自定義的標題欄實現 在android的開發中有時我們需要更個性化的標題欄，而不僅僅是系統預定義的圖示加軟體名，同時有時候我們需要在標題欄中實現更多功能，如新增按鈕響應使用者點選。這就要求我們實現自定義標題欄。下面以

Android自定義實現迴圈滾輪控制元件WheelView

首先呈上效果圖 現在很多地方都用到了滾輪佈局WheelView，比如在選擇生日的時候，風格類似系統提供的DatePickerDialog，開源的控制元件也有很多，不過大部分都是根據當前專案的需求繪製的介面，因此我就自己寫了一款比較符合自己專案的WheelView。 首先

Android 自定義實現輪播圖實踐

開發十年，就只剩下這套架構體系了！ >>>   

Android PullToRrefresh 自定義下拉刷新動畫 （listview、scrollview等）

appear ram nal ima cas 創建 protect tom inter PullToRefreshScrollView 自定義下拉刷新動畫，只需改一處。 以下部分轉載自http://blog.csdn.net/superjunjin/article/

Android自定義Dialog多選對話框（Dialog+Listview+CheckBox)

dia bundle adapter get etl wrap 點擊 所有 技術 先放效果截圖 項目中需要有個Dialog全選對話框，點擊全選全部選中，取消全選全部取消。下午查了些資料，重寫了一下Dialog對話框。把代碼放出來。 public class MainAct

自定義控制元件三部曲檢視篇（三）——瀑布流容器WaterFallLayout實現

前言：只要在前行，夢想就不再遙遠 系列文章： 前面兩節講解了有關ViewGroup的onMeasure、onLayout的知識，這節我們深入性地探討一下，如何實現經常見到的瀑布流容器，本節將實現的效果圖如下： 從效果圖中可以看出這裡要完成的

Android 自定義 HorizontalScrollView 打造再多圖片（控制元件）也不怕 OOM 的橫向滑動效果

自從Gallery被谷歌廢棄以後，Google推薦使用ViewPager和HorizontalScrollView來實現Gallery的效果。的確HorizontalScrollView可以實現Gallery的效果，但是HorizontalScrollView存在一個很大的問

Android自定義View ——畫弧線詳解（Rectf放入用法）

好久沒有寫部落格了。最近想寫一個關於Android的介面，類似於遙控器按鈕形狀，就是類似於下面這張圖片，但是我想設計的使上下左右四個按鈕不是連在一起的，他們之間是有間隔的。在設計的途中關於畫弧線這個函式，我一直沒有理解，所以就這部分進行了一些測試，大家看過這張圖片之後就明白

Android自定義控制元件--圓形進度條（中間有圖diao）

智慧家居越來越流行，在智慧家居中我們常要表現一些資料的百分比 圓形度條中間加個圖是一種非常流行的自定義View 1.第一步 你首先需要對類進行繼承View public class CircleProgressImageView extends View 2.第二步 要實

android自定義view粒子效果之雨（not surfaceview）

首先宣告的是，粒子效果不一定是用surfaceview來實現的，只要可以繪製和更新繪製既可以做到很多精彩的畫面。 簡單的說一下自定義view吧，其實就是繼承View，然後生成幾個構造方法，這樣就是一個簡單的自定義view。 public class MyView exte

android 自定義View之View的測量（onMeasure()方法）

       在自定義控制元件的過程中，系統在繪製View前，必須對View進行測量，已使後面的onLayout(設定View的放置位置）能夠順利進行。而對VIew的測量的過程則是在onMeasure()中進行的。可能這時有的同學就發現問題了，說，自己以前自定義的View沒