Android中ListView错位布局实现（无聊向）

由于某些原因，需要个错位的页面，在网上找不到好的例子，试着动手写了写。

不考虑配色的完成图如下：

 

 

首先考虑的是，listview每一行左右都有可能缩进。

先假设一行的布局就是ImageView，TextView，ImageView，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <RelativeLayout
        android:id="@+id/rl_line"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        
        <ImageView 
            android:id="@+id/iv_left"
            android:layout_width="50dp"
            android:background="#cccccc"
            android:layout_height="match_parent"/>
        
        <ImageView
            android:id="@+id/iv_right"
            android:layout_width="50dp"
            android:background="#cccccc"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"/>

        <TextView 
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/iv_left"
            android:layout_toLeftOf="@id/iv_right"
            android:background="#ffffff"
            android:text="example"
            android:textSize="17sp"/>
    
    </RelativeLayout>

</LinearLayout>

 

接下来要考虑，如何保证一行靠左，一行靠右呢？

可以通过判断行数，来选择ImageView是否显示，大致如下：

        if(position % 2 == 0){
            holder.iv_left.setVisibility(View.GONE);
            holder.iv_right.setVisibility(View.VISIBLE);
        }
        else{
            holder.iv_left.setVisibility(View.VISIBLE);
            holder.iv_right.setVisibility(View.GONE);
        }

之所以还要设置Visibile，是因为第一项和最后一项因为某些原因，会不隐藏ImageView。

这处代码也可以精简。

完成的自定义Adapter如下：

public class ListviewAdapter extends BaseAdapter{
    private LayoutInflater inflater;
    private ViewHolder holder;
    private int index = 0;
    private Context c;
    private String string[];
    
    public ListviewAdapter(Context c,String[] string){
        super();
        this.c = c;
        this.string = string;
        inflater = LayoutInflater.from(c);
    }
    
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return string.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        holder = new ViewHolder();
        if(convertView == null){
            convertView = inflater.inflate(R.layout.mylistview, null);
            holder.tv = (TextView)convertView.findViewById(R.id.tv);
            holder.iv_left = (ImageView)convertView.findViewById(R.id.iv_left);
            holder.iv_right = (ImageView)convertView.findViewById(R.id.iv_right);
            convertView.setTag(holder);
        }
        else
            holder = (ViewHolder) convertView.getTag();
        holder.tv.setText(string[position]);
        
        if(position % 2 == 0){
            holder.iv_left.setVisibility(View.GONE);
            holder.iv_right.setVisibility(View.VISIBLE);
        }
        else{
            holder.iv_left.setVisibility(View.VISIBLE);
            holder.iv_right.setVisibility(View.GONE);
        }
        return convertView;
    }
    
    public class ViewHolder{
        public TextView tv;
        public ImageView iv_left;
        public ImageView iv_right;
    }

}

 

由于两个ImageView设置了颜色为#cccccc，为了保证看起来像一体的，listview的间距和整个页面背景都要设置为#CCCCCC。

activity_main的代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    tools:context="com.example.listviewdemo.MainActivity" >

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#cccccc"
        android:dividerHeight="18dp"/>

</RelativeLayout>

 

以及MainActivity：

public class MainActivity extends Activity {
    private ListView lv;
    private ListviewAdapter adapter;
    private String[] list = new String[]{"aaa","bbb","ccc","ddd","eee",
            "111","222","333","444","555"};
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv = (ListView)findViewById(R.id.lv);
        adapter = new ListviewAdapter(this,list);
        lv.setAdapter(adapter);
        
        lv.setOnItemClickListener(new myOnItemClickListener());
        
    }
    
    private class myOnItemClickListener implements OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(getApplicationContext(), "您选择的是：" + list[position],
                    Toast.LENGTH_SHORT).show();
        }
    }
    
    public void onBackPressed() {
        // TODO Auto-generated method stub
        super.onBackPressed();
    }

}

 

因为只考虑了实现页面，没有考虑功能，故点击操作只有Toast提示。

如果有好的点子，大概会用这个样式写点什么吧

 

这样的布局好不好看，仁者见仁智者见智……

 

 

 

2015.8.13更新：

试着改了改，弄出下面的效果图：

事实证明，还是有点用处的嘛（我果然太闲了……）