【Android】 _UI设计_图片滑动样式
16lz
2021-01-23
目的：ImageSwitcher控件控制图片滑动样式
(一) 效果实现图：
在图形切换控件中轮流显示，并有慢进慢出的动画效果
(二) 项目结构图：
- 新建AndroidStudio项目
- 引入内容
anim：
left_in、left_out、right_in、right_out
Drawable：
样式：shape_button_main.xml
图片：tian1.png、tian2.png、tian3.png、movieback.png
(三)具体的编码实现
- 布局界面比较简单，加入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>-
引入 图片4张：把需要的图片复制到drawable中（注意图片png形式且不要过大）
-
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>- 我的自定义colors：自定义应用顶部的颜色
效果图：
- 主程序入口类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]); }}以上就是本文的全部内容，希望对大家的学习有所帮助~
更多相关文章
- android图片格式
- Android自带的时间空间和日期控件
- Android拍照选取图片
- Android 图片圆角的设置
- Android 界面开发---控件事件监听器、按键处理
- Android - 小功能 - Android系统详解之获取图片和视频的缩略图
- android 图片平铺实现
- android流式布局、待办事项应用、贝塞尔曲线、MVP+Rxjava+Retrof