Android【垂直滚动广告条】仿淘宝头条1号店京东—垂直滚动广告条
2017-12-17 19:51
671 查看
淘宝头条是淘宝App中很经典的一个功能显示,主要用于显示最近的热评新闻,显示主要方式为文字竖直滚动效果,下面简单阐述一下本demo所涉及到的技术点以及功能展示
1.主要用到的控件为Android原生控件ViewFlipper2.1本demo不仅可以像淘宝一样进行上下滚动,并且可以对滚动中的内容进行点击删除
2.2可修改切入动画方式
2.3修改展示时间延迟
下面展示一下淘宝中,出现淘宝头条的效果图
下面展示下我的demo中的效果
下面简单阐述一下设计的思路以及用到的代码
1.首先看一下对ViewFlipper的解释
本人翻译为:ViewFlipper可以用来将两个视图或者两个以上的视图进行简单的添加。但是在同一时间仅仅显示一个子视图。如果要求,也可以定期对每个孩子View之间进行自动翻转。
也就是说,ViewFlipper是一个非常方便的切换视图的一个控件
2.介绍各个视图之间来回切入切出(上下滚动)的动画
实际上是两个进入和退出的两个动画文件
push_up_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="500" android:fromYDelta="100%p" android:toYDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.0" android:toAlpha="1.0" /> </set>
push_up_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="500"/> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" /> </set>
3.在MainActivity的布局文件中,用到ViewFlipper
activity_main.xml<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.sunqi237.scrollview.MainActivity"> <ViewFlipper android:id="@+id/flipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:autoStart="true" android:flipInterval="3000" android:inAnimation="@anim/push_up_in" android:outAnimation="@anim/push_up_out"></ViewFlipper> </RelativeLayout>注意:这里涉及到了ViewFlipper的几个常用的属性
1.android:autoStart=”true” 当获取到当前视图时,则自动对视图进行滚动
2.android:inAnimation 设置ViewFlipper的切入动画
3.android:outAnimation 设置ViewFlipper的切出动画
4.android:flipInterval 设施ViewFlipper的滚动间隔(显示延迟)
4.MainActivity中的代码展示
public class MainActivity extends AppCompatActivity { private ViewFlipper flipper; private List testList; private int count; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); flipper = (ViewFlipper) findViewById(R.id.flipper); //初始化list数据 testList = new ArrayList(); testList.add(0, "爸妈爱的“白”娃娃,真是孕期吃出来的吗?"); testList.add(1, "如果徒步真的需要理由,十四个够不够?"); testList.add(2, "享受清爽啤酒的同时,这些常识你真的了解吗?"); testList.add(3, "三星Galaxy S8定型图无悬念"); testList.add(4, "家猫为何如此高冷?"); count = testList.size(); for (int i = 0; i < count; i++) { final View ll_content = View.inflate(MainActivity.this, R.layout.item_flipper, null); TextView tv_content = (TextView) ll_content.findViewById(R.id.tv_content); ImageView iv_closebreak = (ImageView) ll_content.findViewById(R.id.iv_closebreak); tv_content.setText(testList.get(i).toString()); iv_closebreak.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //对当前显示的视图进行移除 flipper.removeView(ll_content); count--; //当删除后仅剩 一条 新闻时,则取消滚动 if (count == 1) { flipper.stopFlipping(); } } }); flipper.addView(ll_content); } }
[/code]
5.插入子视图的思路
设置一个子视图item_flipper.xml,写好子视图布局item_flipper.xml
<?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="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_marginLeft="20dp" android:layout_height="wrap_content" android:background="@drawable/scrollview_bg" android:text="热议" android:textColor="#F14C00" android:textSize="12sp" /> <TextView android:id="@+id/tv_content" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="top" android:layout_weight="1" android:gravity="top" android:paddingBottom="10dp" android:paddingLeft="@dimen/dp_16" android:paddingTop="@dimen/dp_12" android:text="BreakingNews" android:textColor="@android:color/black" android:textSize="@dimen/font_16"></TextView> <ImageView android:id="@+id/iv_closebreak" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/dp_12" android:paddingRight="@dimen/dp_16" android:src="@drawable/close" /> </LinearLayout>scrollview_bg.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="5dp" /> <stroke android:width="0.1dp" android:color="#F14C00" /> <solid android:color="#fff" /> <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" /> </shape>
总结:
1.利用一个for循环,将子视图进行添加2.对子视图设置点击,通过.removeView() .addView()方法进行增加和删除子视图
相关文章推荐
- Android【垂直滚动广告条】仿淘宝头条1号店京东—垂直滚动广告条
- Android【垂直滚动广告条】仿淘宝头条1号店京东—垂直滚动广告条
- Android 垂直滚动广告条,仿淘宝头条垂直滚动展示最新消息
- Android基础控件——ViewFlipper的使用,仿淘宝头条垂直滚动广告条
- Android控件ViewFlipper仿淘宝头条垂直滚动广告条
- Android 原生控件ViewFlipper实现淘宝头条垂直滚动广告条
- Android基础控件——ViewFlipper的使用,仿淘宝头条垂直滚动广告条
- Android仿淘宝头条向上滚动广告条的效果ViewFlipper
- Android自定义View——仿1号店垂直滚动广告条实现
- Android仿淘宝首页头条View垂直滚动效果
- ViewFlipper的使用,仿淘宝头条垂直滚动广告条
- Android自定义View实现仿1号店垂直滚动广告条代码
- Android仿淘宝头条垂直滚动,垂直走马灯,公告
- Android ViewFlipper实现淘宝垂直滚动广告条
- Android仿淘宝头条向上滚动广告条ViewFlipper
- 【Android 进阶】淘宝头条:向上滚动广告条ViewFlipper
- ViewFlipper的使用,仿淘宝头条垂直滚动广告条
- Android自定义View——仿1号店垂直滚动广告条实现
- Android仿淘宝头条滚动广告条
- 类似淘宝、京东的热点推荐垂直滚动文字广告条