跑马灯,上下轮翻

首先是Fragment里

 View paomadeng = View.inflate(getActivity(), R.layout.paomadeng, null);
        vf = (ViewFlipper) view.findViewById(R.id.vf);
        View paomadeng_item = View.inflate(getActivity(), R.layout.paomadeng_item, null);
        vf.addView(paomadeng_item);

我是在Fragment里写的,如果是Activity就不用View.find了,这行就是找到你要放哪儿;

Activity中就这么简单,然后是布局中

Activity布局中:

<ViewFlipper
        android:id="@+id/vf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoStart="true"
        android:background="#fff"
        android:flipInterval="3000"
        android:inAnimation="@anim/in"
        android:outAnimation="@anim/out"
        android:paddingLeft="30dp" />

然后是paomadeng:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:src="@mipmap/ic_nav_user"
        android:layout_margin="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ViewFlipper
        android:id="@+id/vf"
        android:autoStart="true"
        android:background="#fff"
        android:flipInterval="2000"
        android:paddingLeft="50dp"
        android:inAnimation="@anim/in"
        android:outAnimation="@anim/out"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ViewFlipper>
</LinearLayout>

然后是paomadeng_item

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:src="@mipmap/ic_nav_user"
        android:layout_margin="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ViewFlipper
        android:id="@+id/vf"
        android:autoStart="true"
        android:background="#fff"
        android:flipInterval="2000"
        android:paddingLeft="50dp"
        android:inAnimation="@anim/in"
        android:outAnimation="@anim/out"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </ViewFlipper>
</LinearLayout>

这里就创了一个item,按需求创建就行了,然后在Activity中添加好;

然后还需要两个动画:

然后在in里:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
</set>

在out里:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
    android:fromYDelta="0"
    android:toYDelta="-100%p"/>
</set>

这要就做好了,下面是一些注释:

ViewFlipper是安卓自带的控件:
        第一步:布局
                 <ViewFlipper
                    android:id="@+id/vf"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    //设置自动加载下一个View
                    android:autoStart="true"
                    android:background="#fff"
                    //设置View之间切换的时间间隔
                    android:flipInterval="3000"
                    //设置切换View的进入动画
                    android:inAnimation="@anim/anim_marquee_in"
                    //设置切换View的退出动画
                    android:outAnimation="@anim/anim_marquee_out"
                    android:paddingLeft="30dp" />
        它自带的方法:
                    下面是ViewFlipper常用的方法介绍,除了可以设置上面的属性之外,还提供了其他方法
                        isFlipping: 判断View切换是否正在进行
                        setFilpInterval:设置View之间切换的时间间隔
                        startFlipping:开始View的切换,而且会循环进行
                        stopFlipping:停止View的切换
                        setOutAnimation:设置切换View的退出动画
                        setInAnimation:设置切换View的进入动画
                        showNext: 显示ViewFlipper里的下一个View
                        showPrevious:显示ViewFlipper里的上一个View
        第二步:建一个动画的文件夹:
                    eg: android:fromXDelta="0" android:toXDelta="-100%p" 往左边消失
                      android:fromXDelta="-100%p" android:toXDelta="0" 从左边进
                      android:fromXDelta="0" android:toXDelta="100%p" 往右边消失
                      android:fromXDelta="100%p" android:toXDelta="0"从右边进
                    p:表示父层View的百分比,是以它父层View为参照的
                    1.建一个进入的动画,
                    <set xmlns:android="http://schemas.android.com/apk/res/android">
                        <translate
                            android:duration="1500"
                            android:fromYDelta="100%p"
                            android:toYDelta="0"/>
                    </set>
                    2.建一个出去的动画:
                    <set xmlns:android="http://schemas.android.com/apk/res/android">
                        <translate
                            android:duration="1500"//时间
                            android:fromYDelta="0"//Y轴的起始位置
                            android:toYDelta="-100%p"/>//Y轴的最终位置(从上边消失)
                    </set>
                    
        第三步:创建一个item布局
                    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:padding="8dp"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:background="@drawable/marqueeview_bg"
                                android:text="热议"
                                android:textColor="#F14C00"
                                android:textSize="12sp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:ellipsize="end"
                                android:padding="3dp"
                                android:singleLine="true"
                                android:text="小米6来了:晓龙835+8G运存!"
                                android:textColor="#333"
                                android:textSize="14sp" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:orientation="horizontal">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:background="@drawable/marqueeview_bg"
                                android:text="热议"
                                android:textColor="#F14C00"
                                android:textSize="12sp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:ellipsize="end"
                                android:padding="3dp"
                                android:singleLine="true"
                                android:text="227斤的胖MM,掀起上衣后,美爆全场!"
                                android:textColor="#333"
                                android:textSize="14sp" />
                        </LinearLayout>
        </LinearLayout>

 

posted @ 2017-10-19 21:11  菜鸟东东  阅读(617)  评论(0编辑  收藏  举报