简单实现跑马灯

先来看一下效果,第一次做动态图,做的不好

首先创建一个文件夹,里面创建两个动画xml:

出去时的动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
</set>

进来时的动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
</set>

主布局中:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bwie.paomadengstudy.MainActivity">

    <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="@animator/animator_in"
        <!--设置切换View的退出动画-->
        android:outAnimation="@animator/animator_out"
     />

</RelativeLayout>

创建几个子布局,也就是每一页的内容,我在这里举一个例子,布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="8dp"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="热议"
            android:textColor="#F14C00"
            android:textSize="12sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:ellipsize="end"
            android:padding="3dp"
            android:singleLine="true"
            android:text="小米6来了:晓龙835+8G运存!"
            android:textColor="#333"
            android:textSize="14sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </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: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>

马上就要完成,最后一步了

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewFlipper vf= (ViewFlipper) findViewById(R.id.vf);
        //创建子布局
        View paomadeng_item=View.inflate(MainActivity.this,R.layout.paomadeng_item,null);
        //添加子布局
        vf.addView(paomadeng_item);
    }
}

猜你喜欢

转载自blog.csdn.net/qq_40441190/article/details/78410394