练习Android大图轮播效果的实现-大致布局

这一次我主要想学习动手实现一下平常APP都很常见的大图轮播效果(

如下面红框所示)。但是下面这个是没有动态的文字的,我们这次的是有动态的文字改变的。





实现的步骤大概是这些:

1.显示大图轮播的基本架构(主要用viewpager)

2.无限循环效果的实现

3.自动循环的实现


首先实现第一步,就是把大图轮播的框架搭建出来

这里主要用到的是viewpager这个东西。

首先我们上这个大图轮播的基本布局文件:

<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"
                tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_alignBottom="@id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#77000000"
        android:padding="8dp"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="#ffffff"
            android:textSize="16sp"
            android:singleLine="true"
            android:ellipsize="end"
            android:id="@+id/tv_intro"
            android:text="我是文本" />

        <LinearLayout
            android:layout_marginTop="3dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/dot_layout"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" >

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>




然后那些一个一个的点我们在代码动态的添加,这里我们用到了shape和selector这两个东西,就可以做出大图轮播下面一个一个的dot

我在drawable文件及新建了三个文件:



代码分别是:


selector_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/dot_focus" ></item>
    <item android:drawable="@drawable/dot_unfocus" ></item>

</selector>


dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <solid android:color="#ffffff"></solid>
</shape>


dor_unfocus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <solid android:color="#aa000000"/>

</shape>



dot点直接用shape中的oval属性来做,设置两个不同的颜色,分别用于两种颜色区分是否当前页,再而用selector来让系统动态的根据不同状态来设置不同颜色,这里用了state_enable属性,到时候在代码中通过setEnable(true)就可以动态地设置dot为focus的状态。


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值