你的位置:首页 > 操作系统

[操作系统]Android中ListView错位布局实现(无聊向)


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

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

 

 

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

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

 1 <LinearLayout ="http://schemas.android.com/apk/res/android" 2   ="http://schemas.android.com/tools" 3   android:layout_width="match_parent" 4   android:layout_height="match_parent" 5   android:orientation="vertical"> 6    7   <RelativeLayout 8     android:id="@+id/rl_line" 9     android:layout_width="match_parent"10     android:layout_height="50dp">11     12     <ImageView 13       android:id="@+id/iv_left"14       android:layout_width="50dp"15       android:background="#cccccc"16       android:layout_height="match_parent"/>17     18     <ImageView19       android:id="@+id/iv_right"20       android:layout_width="50dp"21       android:background="#cccccc"22       android:layout_height="match_parent"23       android:layout_alignParentRight="true"/>24 25     <TextView 26       android:id="@+id/tv"27       android:layout_width="match_parent"28       android:layout_height="match_parent"29       android:layout_toRightOf="@id/iv_left"30       android:layout_toLeftOf="@id/iv_right"31       android:background="#ffffff"32       android:text="example"33       android:textSize="17sp"/>34   35   </RelativeLayout>36 37 </LinearLayout>

 

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

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

1     if(position % 2 == 0){2       holder.iv_left.setVisibility(View.GONE);3       holder.iv_right.setVisibility(View.VISIBLE);4     }5     else{6       holder.iv_left.setVisibility(View.VISIBLE);7       holder.iv_right.setVisibility(View.GONE);8     }

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

这处代码也可以精简。

完成的自定义Adapter如下:

 1 public class ListviewAdapter extends BaseAdapter{ 2   private LayoutInflater inflater; 3   private ViewHolder holder; 4   private int index = 0; 5   private Context c; 6   private String string[]; 7    8   public ListviewAdapter(Context c,String[] string){ 9     super();10     this.c = c;11     this.string = string;12     inflater = LayoutInflater.from(c);13   }14   15   @Override16   public int getCount() {17     // TODO Auto-generated method stub18     return string.length;19   }20 21   @Override22   public Object getItem(int position) {23     // TODO Auto-generated method stub24     return null;25   }26 27   @Override28   public long getItemId(int position) {29     // TODO Auto-generated method stub30     return 0;31   }32 33   @Override34   public View getView(final int position, View convertView, ViewGroup parent) {35     // TODO Auto-generated method stub36     holder = new ViewHolder();37     if(convertView == null){38       convertView = inflater.inflate(R.layout.mylistview, null);39       holder.tv = (TextView)convertView.findViewById(R.id.tv);40       holder.iv_left = (ImageView)convertView.findViewById(R.id.iv_left);41       holder.iv_right = (ImageView)convertView.findViewById(R.id.iv_right);42       convertView.setTag(holder);43     }44     else45       holder = (ViewHolder) convertView.getTag();46     holder.tv.setText(string[position]);47     48     if(position % 2 == 0){49       holder.iv_left.setVisibility(View.GONE);50       holder.iv_right.setVisibility(View.VISIBLE);51     }52     else{53       holder.iv_left.setVisibility(View.VISIBLE);54       holder.iv_right.setVisibility(View.GONE);55     }56     return convertView;57   }58   59   public class ViewHolder{60     public TextView tv;61     public ImageView iv_left;62     public ImageView iv_right;63   }64 65 }

ListviewAdapter.java

 

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

activity_main的代码如下:

 1 <RelativeLayout ="http://schemas.android.com/apk/res/android" 2   ="http://schemas.android.com/tools" 3   android:layout_width="match_parent" 4   android:layout_height="match_parent" 5   android:background="#cccccc" 6   tools:context="com.example.listviewdemo.MainActivity" > 7  8   <ListView 9     android:id="@+id/lv"10     android:layout_width="match_parent"11     android:layout_height="match_parent"12     android:divider="#cccccc"13     android:dividerHeight="18dp"/>14 15 </RelativeLayout>

activity_main.

 

以及MainActivity:

 1 public class MainActivity extends Activity { 2   private ListView lv; 3   private ListviewAdapter adapter; 4   private String[] list = new String[]{"aaa","bbb","ccc","ddd","eee", 5       "111","222","333","444","555"}; 6    7   @Override 8   protected void onCreate(Bundle savedInstanceState) { 9     super.onCreate(savedInstanceState);10     setContentView(R.layout.activity_main);11     lv = (ListView)findViewById(R.id.lv);12     adapter = new ListviewAdapter(this,list);13     lv.setAdapter(adapter);14     15     lv.setOnItemClickListener(new myOnItemClickListener());16     17   }18   19   private class myOnItemClickListener implements OnItemClickListener {20     @Override21     public void onItemClick(AdapterView<?> parent, View view, int position, long id) {22       Toast.makeText(getApplicationContext(), "您选择的是:" + list[position],23           Toast.LENGTH_SHORT).show();24     }25   }26   27   public void onBackPressed() {28     // TODO Auto-generated method stub29     super.onBackPressed();30   }31 32 }

MainActivity.java

 

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

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

 

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