先给大家上个图(不知道为什么录制的第一个目录老是花的,不管了,大家能动意思就行)。
大家应该经常加过这种效果吧,下面我们就开始实现效果。
其实用的东西我们都是知道的,就是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