Android--自定義控件---自動分頁的GridView

最近，根據項目需求，需要一個能夠自動分頁的導航，所以便自定義了一個自動分頁的GridView。

思路：繼承RelativeLayout，然后在里面放了一個viewpager和一個GridView。。。我也不會說，還是直接上代碼吧

先看看你效果圖，分別是2行3列和1行3列（有自定義屬性，可以自己定義幾行幾列）

接下來直接看源代碼(很簡單)

package custom.widget;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;

import com.newair.automaticpagedemo.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ouhimehime on 16/5/4.
 * ----------自動分頁的GridView----------
 */
public class AutoMaticPageGridView extends RelativeLayout {

    //分頁所用
    private ViewPager viewPager;
    //導航點
    private RadioGroup radioGroup;
    //自定義行數
    private int lines = 0;
    //自定義列數
    private int column = 0;
    //自定義按鈕樣式
    private int btn_res;
    //自定義屬性是否顯示導航點
    private boolean btn_isvisible;
    //頁數-需要動態計算
    private int pages = 0;
    //適配器
    private BaseAutoAdapter adapter;
    //Item的高度
    private int itemHeight = 0;

    //點擊事件的接口
    public interface OnItemClickCallBack {
        void OnItemClicked(int position, Object object);
    }

    private OnItemClickCallBack onItemClickCallBack;

    public void setOnItemClickListener(OnItemClickCallBack onItemClickCallBack) {
        this.onItemClickCallBack = onItemClickCallBack;
    }


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

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public AutoMaticPageGridView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }


    //初始化控件
    private void init(Context context, AttributeSet attrs) {
        //加載自定義屬性
        final TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.AutoMaticPageGridView);
        lines = array.getInteger(R.styleable.AutoMaticPageGridView_auto_lines, 1);//行數
        column = array.getInteger(R.styleable.AutoMaticPageGridView_auto_column, 4);//列數
        btn_res = array.getResourceId(R.styleable.AutoMaticPageGridView_auto_button, 0);//btn的樣式
        btn_isvisible = array.getBoolean(R.styleable.AutoMaticPageGridView_auto_button_visible, true);//默認true
        array.recycle();
        //分頁用
        viewPager = new ViewPager(context);
        viewPager.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT));
        addView(viewPager);
        //導航點用
        radioGroup = new RadioGroup(context);
        radioGroup.setOrientation(LinearLayout.HORIZONTAL);
        RelativeLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        params.addRule(RelativeLayout.CENTER_IN_PARENT);
        radioGroup.setLayoutParams(params);
        addView(radioGroup);
        //如果不顯示的話就隱藏
        if (!btn_isvisible) {
            radioGroup.setVisibility(GONE);
        }
    }

    //設置適配器
    public void setAdapter(BaseAutoAdapter baseAdapter) {
        this.adapter = baseAdapter;
        //計算頁數
        if ((adapter.getCounts() / (column * lines)) > 0) {
            pages = (adapter.getCounts() / (column * lines)) + 1; //多一頁
        } else {
            pages = adapter.getCounts();
        }
        //添加radioButton
        addRadioButton(pages);
        this.post(new Runnable() {
            @Override
            public void run() {
                itemHeight = getMeasuredHeight() / lines;
                //顯示viewpager
                ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getContext());
                viewPager.setAdapter(viewPagerAdapter);
                //設置聯動
                initLinkAgeEvent();
            }
        });
    }

    //添加RadioButton
    private void addRadioButton(int pages) {
        for (int i = 0; i < pages; i++) {
            RadioButton radioButton = new RadioButton(getContext());
            radioButton.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            radioButton.setPadding(5, 5, 5, 5);//間距
            radioButton.setId(i);//設置Id,方便聯動
            radioButton.setClickable(false);
            if (btn_res != 0) {  //設置按鈕樣式
                radioButton.setButtonDrawable(btn_res);
            }
            radioGroup.addView(radioButton);
        }
    }

    //給當前頁計算數據數量
    private List<View> getAdapterData(int position) {
        List<View> cerrent = new ArrayList<>();
        if (position == pages - 1) { //如果等於最后一頁
            for (int i = position * (lines * column); i < adapter.getCounts(); i++) {
                cerrent.add(adapter.getItemView(i, null));
            }
        } else {
            for (int i = position * (lines * column); i < position * (lines * column) + (lines * column); i++) {
                cerrent.add(adapter.getItemView(i, null));
            }
        }
        return cerrent;
    }

    //ViewPager適配器
    private class ViewPagerAdapter extends PagerAdapter {

        private Context context;

        public ViewPagerAdapter(Context context) {
            this.context = context;
        }

        @Override
        public int getCount() {
            return pages;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            CustomGridView gridView = new CustomGridView(context);
            gridView.setLayoutParams(new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT,
                    AbsListView.LayoutParams.MATCH_PARENT));
            gridView.setNumColumns(column);//設置列數
            gridView.setColumnWidth(GridView.AUTO_FIT);
            GridViewAdapter adapter = new GridViewAdapter(getAdapterData(position), position);
            gridView.setAdapter(adapter);
            container.addView(gridView);
            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    GridViewAdapter adapter1 = (GridViewAdapter) parent.getAdapter();
                    onItemClickCallBack.OnItemClicked(adapter1.currentPage * (lines * column) + position, view);
                }
            });
            return gridView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((GridView) object);
        }
    }

    //GridView的適配器
    private class GridViewAdapter extends BaseAdapter {

        private List<View> views;//數據量
        public int currentPage; //當前頁

        public GridViewAdapter(List<View> counts, int currentPage) {
            this.views = counts;
            this.currentPage = currentPage;
        }

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

        @Override
        public Object getItem(int position) {
            return position;
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = views.get(position);
                convertView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, itemHeight));
            }
            return convertView;
        }

    }

    //自定義GridView,禁止滑動
    private class CustomGridView extends GridView {

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

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

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

        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        public CustomGridView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }

        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) {
            if (ev.getAction() == MotionEvent.ACTION_MOVE) {
                return true;//禁止GridView進行滑動
            }
            return super.dispatchTouchEvent(ev);
        }
    }

    //初始化聯動聯動事件
    private void initLinkAgeEvent() {
        //默認選中第一個
        viewPager.setCurrentItem(0);
        radioGroup.check(radioGroup.getChildAt(0).getId());
        //滑動換頁事件
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                radioGroup.check(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

}

這個組件也有個適配器，很簡單，就是定義了幾個抽象方法

package custom.widget;

import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ouhimehime on 16/5/4.
 * -----適配器=------
 */
public abstract class BaseAutoAdapter {


    public abstract int getCounts(); //返回數據數量

    public abstract Object getItem(int position); //當前Item的數據

    public abstract View getItemView(int position, ViewGroup parent); //返回Item的布局


}

還自定義了一部分屬性，方便使用起來好控制

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="AutoMaticPageGridView">
        <!-- 行數 -->
        <attr name="auto_lines" format="integer" />
        <!-- 列數 -->
        <attr name="auto_column" format="integer" />
        <!-- button的樣式 -->
        <attr name="auto_button" format="reference" />
        <!-- 是否顯示導航點 -->
        <attr name="auto_button_visible" format="boolean" />
    </declare-styleable>
</resources>

-----------------------------------------------------------------------以上就是源代碼了-----------------------------------------------------------------------------

 

下面是如何使用：（就當做一個控件來使用就可以）

①、先看布局文件XML,控件的高度是可以自己定義的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:auto="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <custom.widget.AutoMaticPageGridView
        android:id="@+id/automatic"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        auto:auto_button="@drawable/btn_status_style"
        auto:auto_column="3"
        auto:auto_lines="2" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

②、再看適配器代碼，適配器需要繼承BaseAutoAdapter

package adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.newair.automaticpagedemo.R;

import java.util.List;

import custom.widget.BaseAutoAdapter;

/**
 * Created by ouhimehime on 16/5/4.
 * ------------適配器------------
 */
public class MyAutoMaticPageAdapter extends BaseAutoAdapter {

    private Context context;
    private List<Integer> myData;

    public MyAutoMaticPageAdapter(Context context, List<Integer> myData) {
        this.context = context;
        this.myData = myData;
    }

    @Override
    public int getCounts() {
        return myData.size();
    }

    @Override
    public Object getItem(int position) {
        return myData.get(position);
    }

    @Override
    public View getItemView(int position, ViewGroup parent) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_layout, null);

        return view;
    }

}

③、再看主布局代碼，為了方便我就隨便放了放了10條數據

package com.newair.automaticpagedemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

import adapter.MyAutoMaticPageAdapter;
import custom.widget.AutoMaticPageGridView;

public class MainActivity extends AppCompatActivity {

    private AutoMaticPageGridView automatic;
    private MyAutoMaticPageAdapter adapter;
    private List<Integer> myData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        automatic = (AutoMaticPageGridView) findViewById(R.id.automatic);
        myData = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            myData.add(i);
        }

        adapter = new MyAutoMaticPageAdapter(this, myData);
        automatic.setAdapter(adapter);
        //點擊事件
        automatic.setOnItemClickListener(new AutoMaticPageGridView.OnItemClickCallBack() {
            @Override
            public void OnItemClicked(int position, Object object) {
                Toast.makeText(MainActivity.this, position + "--", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

------------------------------------------------------------------------以上是如何使用----------------------------------------------------------------------------------

以上就是自己定義了一個自動分頁的控件，寫的不好，希望各位見諒。