多級目錄聯動效果實現

    先給大家上個圖(不知道爲什麼錄製的第一個目錄老是花的,不管了,大家能動意思就行)。
這裏寫圖片描述

    大家應該經常加過這種效果吧,下面我們就開始實現效果。

    其實用的東西我們都是知道的,就是listview,那麼listview怎麼實現這個效果呢,主要在於適配器寫好了即可。

先給出主佈局代碼:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <ListView
            android:id="@+id/list1"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:divider="@null"
            android:scrollbars="none" />

        <ListView
            android:id="@+id/list2"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:divider="@null"
            android:scrollbars="none" />

        <ListView
            android:id="@+id/list3"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:divider="@null"
            android:scrollbars="none" />

    </LinearLayout>

    <Button
        android:id="@+id/getdate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="獲取數據"/>

    <TextView
        android:id="@+id/showstate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="數據展示臺"
        android:layout_margin="10dp"/>

</LinearLayout>

    很簡單,三個listview,一個button和一個textview,然後再給出listview的item佈局,我三個listview用的都是用一個item佈局,下面看好:

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

    <TextView
        android:id="@+id/list_item_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:background="#ffffff"
        android:gravity="center"
        android:textColor="#737373"
        android:text="層級目錄"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#bcbcbc"/>

</LinearLayout>

簡單明瞭,然後給出MainActivity的代碼。

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

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

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {

    //下面控件的id用butterknife插件獲取到的,不知道的同學去搜一下,我這裏是在gradle裏面配置了一下
    @Bind(R.id.list1)
    ListView list1;
    @Bind(R.id.list2)
    ListView list2;
    @Bind(R.id.list3)
    ListView list3;
    @Bind(R.id.getdate)
    Button getdate;
    @Bind(R.id.showstate)
    TextView showstate;

    //裝數據的三個listview
    private List<String> lists1;
    private List<String> lists2;
    private List<String> lists3;

    //定義了三個適配器,因爲下面數據的刷新靠這個
    private CommonAdaper commonadapter1;
    private CommonAdaper commonadapter2;
    private CommonAdaper commonadapter3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initData();
        initAdapter();
        initEvent();
    }

    private void initData() {
        lists1 = new ArrayList<>();
        lists2 = new ArrayList<>();
        lists3 = new ArrayList<>();
        //一個listview裝着一個list,前面的決定後面的變化,具體控制方式在onItemClick方法中
        for (int i = 1; i < 31; i++) {
            lists1.add("一級聯動目錄" + i);
        }
        for (int i = 1; i < 31; i++) {
            lists2.add("二級聯動目錄" + i);
        }
        for (int i = 1; i < 31; i++) {
            lists3.add("三級聯動目錄" + i);
        }
    }

    private void initAdapter() {
        commonadapter1 = new CommonAdaper(MainActivity.this, lists1, 1);
        list1.setAdapter(commonadapter1);
        commonadapter2 = new CommonAdaper(MainActivity.this, lists2, 2);
        list2.setAdapter(commonadapter2);
        commonadapter3 = new CommonAdaper(MainActivity.this, lists3, 3);
        list3.setAdapter(commonadapter3);
    }

    private void initEvent() {
        list1.setOnItemClickListener(this);
        list2.setOnItemClickListener(this);
        list3.setOnItemClickListener(this);
        getdate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showstate.setText(commonadapter1.getCurentItemnumber() + commonadapter2.getCurentItemnumber() + commonadapter3.getCurentItemnumber());
            }
        });
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        switch (parent.getId()) {
            case R.id.list1:
                commonadapter1.changeSelected(position);//當點擊listview的時候,刷新當前的listview,就會導致被點擊的item和其他item呈現不用字體顏色和背景
                commonadapter2.changeSelected(0);//同上
                commonadapter3.changeSelected(0);//同上
                // 注意這前三行代碼和後面這兩個代碼位置不能調換,否則會出現雖然定位成功,但會導致listview不能滾動到頂部
                list2.setSelection(0);  //是listview定位到第一條數據,也就是頂部
                list3.setSelection(0);
                break;
            case R.id.list2:
                commonadapter2.changeSelected(position);//刷新
                commonadapter3.changeSelected(0);//刷新
                //這裏同上
                list3.setSelection(0);
                break;
            case R.id.list3:
                commonadapter3.changeSelected(position);//刷新
                break;
        }
    }
}

    做了基本的listview數據添加的處理,然後主要的代碼處理都放在onItemClick這個方法裏面,那麼我們就要看適配器裏面是怎麼寫的了,三個listview用的也是同一個適配器,給出:

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.List;

import android.widget.TextView;

/**
 * create 2017-06-30
 */
public class CommonAdaper extends BaseAdapter {

    private Context context;
    private List<String> list;
    private int mSelect = 0;   //選中項
    private int sign;   //作爲一個標記,每個listview傳入的sign不一樣,下面處理的結果也不一樣
    private String currentcontent = null;  //當前item的內容

    public CommonAdaper(Context context, List<String> list, int sign) {
        this.context = context;
        this.list = list;
        this.sign = sign;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null) {
            viewHolder = new ViewHolder();
            convertView = LayoutInflater.from(context).inflate(R.layout.list_item, null);
            viewHolder.title = (TextView) convertView.findViewById(R.id.list_item_title);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        currentcontent = list.get(mSelect);   //獲取當前item的值,注意,是被選中的那個數據,所以必須用mSelect
        viewHolder.title.setText(list.get(position));
        //這裏做判斷,對不同的listview做的處理不一樣
        switch (sign) {
            case 1:
                if (mSelect == position) {
                    viewHolder.title.setTextColor(Color.argb(255, 77, 179, 123));
                    viewHolder.title.setBackgroundColor(Color.argb(255, 230, 230, 230));  //選中項背景
                } else {
                    viewHolder.title.setTextColor(Color.argb(255, 115, 115, 115));
                    viewHolder.title.setBackgroundColor(Color.WHITE);  //其他項背景
                }
                break;
            case 2:
                if (mSelect == position) {
                    viewHolder.title.setTextColor(Color.argb(255, 77, 179, 123));
                    viewHolder.title.setBackgroundColor(Color.argb(255, 210, 210, 210));  //選中項背景
                } else {
                    viewHolder.title.setTextColor(Color.argb(255, 100, 100, 100));
                    viewHolder.title.setBackgroundColor(Color.argb(255, 230, 230, 230));  //其他項背景
                }
                break;
            case 3:
                if (mSelect == position) {
                    viewHolder.title.setTextColor(Color.argb(255, 75, 179, 123));
                    viewHolder.title.setBackgroundColor(Color.argb(255, 190, 190, 190));  //選中項背景
                } else {
                    viewHolder.title.setTextColor(Color.argb(255, 85, 85, 85));
                    viewHolder.title.setBackgroundColor(Color.argb(255, 210, 210, 210));  //其他項背景
                }
                break;
        }

        return convertView;
    }

    //簡單的充當viewholder的角色
    private class ViewHolder {
        public TextView title;
    }

    //獲取當前被選中的item中的內容
    public String getCurentItemnumber()
    {
        return currentcontent;
    }

    public void changeSelected(int positon) { //刷新頁面
        if (positon != mSelect) {
            mSelect = positon;
            notifyDataSetChanged();
        }
    }

}

    相對於別人的適配器,我這個唯一不一樣的就是添加了一個sign的標記,作用就是可以根據不同的listview對數據做不同的處理,這樣點擊就會有不同的效果,其他的註釋比較詳細,自己可以看懂。

需要源碼的請訪問:http://download.csdn.net/download/wanxuedong/9913870

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章