多级目录联动效果实现

    先给大家上个图(不知道为什么录制的第一个目录老是花的,不管了,大家能动意思就行)。
这里写图片描述

    大家应该经常加过这种效果吧,下面我们就开始实现效果。

    其实用的东西我们都是知道的,就是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

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