android listview 实现时光轴效果
2016-08-18 17:13
330 查看
listview实现类似如下的时光轴效果
最主要的是左边的时光轴节点和时光轴的问题,这个问题解决了,基本上这个时光轴就做出来了,实现的大体思路如下
把listview和一条竖直的线放在一起,然后再在listview的每个item左边放一个圆形图标做为时光轴节点,调整距离使他正好覆盖在线上,这样就不同担心当每个item的高度变化后,时光轴节点和item对应的问题了。
代码:
主布局:
listview的item布局:
java文件的代码就很简单了
MainActivity:
然后自己再设置一下adapter就好了
大功告成!
最主要的是左边的时光轴节点和时光轴的问题,这个问题解决了,基本上这个时光轴就做出来了,实现的大体思路如下
把listview和一条竖直的线放在一起,然后再在listview的每个item左边放一个圆形图标做为时光轴节点,调整距离使他正好覆盖在线上,这样就不同担心当每个item的高度变化后,时光轴节点和item对应的问题了。
代码:
主布局:
<?xml version="1.0" encoding="utf-8"?> <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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" tools:context="gaojin.neu.timeroller.MainActivity"> <LinearLayout android:id="@+id/ll_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:paddingBottom="8dp" android:paddingTop="5dp"> <TextView android:id="@+id/tv_left" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_weight="1" android:text="时光历史" android:textColor="@color/black" android:textSize="16sp" /> <TextView android:id="@+id/tv_right" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="20dp" android:layout_weight="1" android:gravity="right" android:text="时光机" android:textColor="@color/pink" /> </LinearLayout> <View android:id="@+id/line_vertical" android:layout_width="match_parent" android:layout_height="1dp" android:layout_below="@+id/ll_title" android:background="@color/gray" /> <View android:id="@+id/line_top" android:layout_width="1dp" android:layout_height="match_parent" android:layout_below="@+id/line_vertical" android:layout_marginLeft="22dp" android:background="@color/gray" /> <!--listview设置为不显示分割线,自己在item布局里面加入分割线--> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/line_vertical" android:cacheColorHint="@null" android:divider="@null"> </ListView> </RelativeLayout>
listview的item布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/image" android:layout_width="14dp" android:layout_height="14dp" android:layout_marginLeft="15dp" android:layout_marginTop="8dp" android:background="@mipmap/radio" /> <RelativeLayout android:id="@+id/rl_center" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="5dp" android:layout_toRightOf="@+id/image" > <TextView android:id="@+id/tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:gravity="center" android:text="2016-8-17 17:14:23" android:textSize="14sp" /> <TextView android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="8dp" android:layout_toRightOf="@+id/tv_time" android:gravity="center" android:text="天气: 晴" android:textSize="14sp" /> <TextView android:id="@+id/tv_info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_time" android:layout_marginTop="5dp" android:text="从前从前 有个人爱你很久" android:textColor="@color/black" android:textSize="16sp" /> <View android:id="@+id/line" android:layout_width="match_parent" android:layout_height="1dp" android:layout_below="@+id/tv_info" android:layout_marginTop="10dp" android:background="@color/gray" /> </RelativeLayout> </RelativeLayout>
java文件的代码就很简单了
MainActivity:
public class MainActivity extends AppCompatActivity { private List<String> list = new ArrayList<String>(); private MyAdapter adapter; private ListView listView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = (ListView) findViewById(R.id.listview); for (int i = 0; i < 50; i++) { list.add("555" + i); } adapter = new MyAdapter(this, list); listView.setAdapter(adapter); } }
然后自己再设置一下adapter就好了
大功告成!
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页
- 使用CSS框架布局的缺点和优点小结
- div+CSS网页布局的意义与副作用原因小结第1/2页
- 在winform下实现左右布局多窗口界面的方法
- Android布局技巧之创建可重用的UI组件
- Android编程之代码创建布局实例分析
- CSS顶级技巧大放送,div+css布局必知
- 用div实现像table一样的布局方法
- Bootstrap三种表单布局的使用方法
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- 第七篇Bootstrap表单布局实例代码详解(三种表单布局)
- jQuery EasyUi实战教程之布局篇
- jQuery EasyUI 布局之动态添加tabs标签页
- jquery自适应布局的简单实例
- Bootstrap页面布局基础知识全面解析