【Android】 _UI设计_图片滑动样式

版权声明:本文为博主原创文章,转载请注明出处!如有问题,欢迎指正。 https://blog.csdn.net/cungudafa/article/details/84654552

目的: ImageSwitcher控件控制图片滑动样式

(一) 效果实现图:

在图形切换控件中轮流显示,并有慢进慢出的动画效果
在这里插入图片描述

(二) 项目结构图:

  • 新建AndroidStudio项目
    在这里插入图片描述在这里插入图片描述
  • 引入内容
    anim:
    left_in、left_out、right_in、right_out
    Drawable:
    样式:shape_button_main.xml
    图片:tian1.png、tian2.png、tian3.png、movieback.png

(三)具体的编码实现

  1. 布局界面比较简单,加入ImageSwitcher组件,以及2个button,imageSwitcher.xml:
    在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:gravity="center"
    android:background="#a98175">
    <ImageSwitcher
        android:id="@+id/is_1"
        android:layout_width="match_parent"
        android:layout_height="243dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="15dp"
        >
        <Button
            android:id="@+id/btn_previous"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/shape_button_main"
            style="?android:attr/borderlessButtonStyle"
            android:text="上一张"
            android:textSize="18dp"
            android:textColor="#ffffff"/>

        <Button
            android:id="@+id/btn_next"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/shape_button_main"
            style="?android:attr/borderlessButtonStyle"
            android:text="下一张"
            android:textSize="18dp"
            android:textColor="#ffffff"/>
    </LinearLayout>
</LinearLayout>
  1. 引入 图片4张:把需要的图片复制到drawable中(注意图片png形式且不要过大)
    在这里插入图片描述
    在这里插入图片描述

  2. button样式1种:
    在这里插入图片描述
    在这里插入图片描述
    3.1 在drawable右键新建Drawabler esource file
    在这里插入图片描述
    3.2命名为shape_button_main:
    在这里插入图片描述
    3.3创建完成,并为其设置样式:
    在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<!-- 形状 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:shape="rectangle"
    tools:ignore="MissingDefaultResource">

    <solid android:color="#b36d61" />
    <!-- 边框 -->
    <stroke
        android:width="1dip"
        android:color="#b36d61" />
    <!-- 内填充颜色 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
    <!-- 圆角 -->
    <corners android:radius="200dp" />

</shape>

3.4完成如图:在这里插入图片描述
4. 动态样式4种
在这里插入图片描述

4.1 在res右键添加Android Resource Directory文件夹:
在这里插入图片描述
4.2 命名为anim->选择type为anim:
在这里插入图片描述
4.3新建完成如图:
在这里插入图片描述
4.4 选中anim文件夹->右键添加Animation resource file样式:
在这里插入图片描述
4.5命名为left_in:
在这里插入图片描述
4.6重复添加left_out、right_in、right_out,完成如图:
在这里插入图片描述
4.7 自定义4种样式:
在这里插入图片描述

left_in:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%p"
        android:toXDelta="0"
        android:duration="600"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>

left_out:

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="600"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>

right_in:

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="600"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>

right_out:

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="600"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>
  1. 我的自定义colors:自定义应用顶部的颜色
    在这里插入图片描述
    效果图:
    在这里插入图片描述
  2. 主程序入口类imageSwitcherActivity.java
package com.example.cungu.myapplication3;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class imageSwitcherActivity extends AppCompatActivity implements View.OnClickListener,ViewSwitcher.ViewFactory {
    private ImageSwitcher is_1;
    private Button btn_next;
    private Button btn_previous;
    private int image[]={R.drawable.tian1,R.drawable.tian2,R.drawable.tian3,R.drawable.movieback};//图片的id数组
    private int imageIndex=0;//图片显示序列号

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_switcher);
        is_1=(ImageSwitcher) findViewById(R.id.is_1);
        btn_next=(Button) findViewById(R.id.btn_next);
        btn_previous=(Button) findViewById(R.id.btn_previous);
        btn_previous.setOnClickListener(this);
        btn_next.setOnClickListener(this);
        init(); //设置Factory
    }

    @Override
    public void onClick(View view) {
        if (view.getId()==R.id.btn_next){
            imageIndex++;
            if(imageIndex>3){
                imageIndex=0;
            }
            is_1.setInAnimation(this,R.anim.left_in);
            is_1.setOutAnimation(this,R.anim.right_out);
        }else if(view.getId()==R.id.btn_previous){
            imageIndex--;
            if(imageIndex<0){
                imageIndex=image.length-1;
            }
            is_1.setInAnimation(this,R.anim.right_in);
            is_1.setOutAnimation(this,R.anim.left_out);
        }
        is_1.setImageResource(image[imageIndex]);
    }

    @Override
    public View makeView() {//实现viewFactory接口.生成imageview
        ImageView imageView=new ImageView(this);
        return imageView;
    }
    private void init(){//初始化imageSwitch
        is_1.setFactory(this);
        is_1.setImageResource(image[imageIndex]);
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助~

猜你喜欢

转载自blog.csdn.net/cungudafa/article/details/84654552