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

目的&＃xff1a; ImageSwitcher控件控制图片滑动样式

在图形切换控件中轮流显示&＃xff0c;并有慢进慢出的动画效果

• 新建AndroidStudio项目
  
• 引入内容
  anim&＃xff1a;
  left_in、left_out、right_in、right_out
  Drawable&＃xff1a;
  样式&＃xff1a;shape_button_main.xml
  图片&＃xff1a;tian1.png、tian2.png、tian3.png、movieback.png

1. 布局界面比较简单&＃xff0c;加入ImageSwitcher组件&＃xff0c;以及2个button&＃xff0c;imageSwitcher.xml&＃xff1a;
   


<LinearLayout xmlns:android&＃61;"http://schemas.android.com/apk/res/android"xmlns:tools&＃61;"http://schemas.android.com/tools"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"android:orientation&＃61;"vertical"android:gravity&＃61;"center"android:background&＃61;"#a98175"><ImageSwitcherandroid:id&＃61;"&＃64;&＃43;id/is_1"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"243dp"/><LinearLayoutandroid:layout_width&＃61;"match_parent"android:layout_height&＃61;"wrap_content"android:orientation&＃61;"horizontal"android:paddingTop&＃61;"15dp"><Buttonandroid:id&＃61;"&＃64;&＃43;id/btn_previous"android:layout_width&＃61;"0dip"android:layout_height&＃61;"wrap_content"android:layout_weight&＃61;"1"android:layout_marginLeft&＃61;"15dp"android:layout_marginRight&＃61;"15dp"android:background&＃61;"&＃64;drawable/shape_button_main"style&＃61;"?android:attr/borderlessButtonStyle"android:text&＃61;"上一张"android:textSize&＃61;"18dp"android:textColor&＃61;"#ffffff"/><Buttonandroid:id&＃61;"&＃64;&＃43;id/btn_next"android:layout_width&＃61;"0dip"android:layout_height&＃61;"wrap_content"android:layout_weight&＃61;"1"android:layout_marginLeft&＃61;"15dp"android:layout_marginRight&＃61;"15dp"android:background&＃61;"&＃64;drawable/shape_button_main"style&＃61;"?android:attr/borderlessButtonStyle"android:text&＃61;"下一张"android:textSize&＃61;"18dp"android:textColor&＃61;"#ffffff"/>LinearLayout>
LinearLayout>


2. 引入 图片4张&＃xff1a;把需要的图片复制到drawable中&＃xff08;注意图片png形式且不要过大&＃xff09;
   
   

3. button样式1种&＃xff1a;
   
   
   3.1 在drawable右键新建Drawabler esource file
   
   3.2命名为shape_button_main&＃xff1a;
   
   3.3创建完成&＃xff0c;并为其设置样式&＃xff1a;
   



<shape xmlns:android&＃61;"http://schemas.android.com/apk/res/android"xmlns:tools&＃61;"http://schemas.android.com/tools"android:shape&＃61;"rectangle"tools:ignore&＃61;"MissingDefaultResource"><solid android:color&＃61;"#b36d61" /><strokeandroid:width&＃61;"1dip"android:color&＃61;"#b36d61" /><paddingandroid:bottom&＃61;"10dp"android:left&＃61;"10dp"android:right&＃61;"10dp"android:top&＃61;"10dp" /><corners android:radius&＃61;"200dp" />shape>


3.4完成如图&＃xff1a;
4. 动态样式4种

4.1 在res右键添加Android Resource Directory文件夹&＃xff1a;

4.2 命名为anim->选择type为anim&＃xff1a;

4.3新建完成如图&＃xff1a;

4.4 选中anim文件夹->右键添加Animation resource file样式&＃xff1a;

4.5命名为left_in:

4.6重复添加left_out、right_in、right_out&＃xff0c;完成如图&＃xff1a;

4.7 自定义4种样式&＃xff1a;

left_in&＃xff1a;


<set xmlns:android&＃61;"http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta&＃61;"-100%p"android:toXDelta&＃61;"0"android:duration&＃61;"600"/><alphaandroid:fromAlpha&＃61;"0.1"android:toAlpha&＃61;"1.0"android:duration&＃61;"600"/>
set>


left_out:


<set xmlns:android&＃61;"http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta&＃61;"0"android:toXDelta&＃61;"-100%p"android:duration&＃61;"600"/><alphaandroid:fromAlpha&＃61;"0.1"android:toAlpha&＃61;"1.0"android:duration&＃61;"600"/>
set>


right_in:


<set xmlns:android&＃61;"http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta&＃61;"100%p"android:toXDelta&＃61;"0"android:duration&＃61;"600"/><alphaandroid:fromAlpha&＃61;"0.1"android:toAlpha&＃61;"1.0"android:duration&＃61;"600"/>
set>


right_out:


<set xmlns:android&＃61;"http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta&＃61;"0"android:toXDelta&＃61;"100%p"android:duration&＃61;"600"/><alphaandroid:fromAlpha&＃61;"0.1"android:toAlpha&＃61;"1.0"android:duration&＃61;"600"/>
set>


5. 我的自定义colors&＃xff1a;自定义应用顶部的颜色
   
   效果图&＃xff1a;
   
6. 主程序入口类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[]&＃61;{R.drawable.tian1,R.drawable.tian2,R.drawable.tian3,R.drawable.movieback};//图片的id数组private int imageIndex&＃61;0;//图片显示序列号&＃64;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_image_switcher);is_1&＃61;(ImageSwitcher) findViewById(R.id.is_1);btn_next&＃61;(Button) findViewById(R.id.btn_next);btn_previous&＃61;(Button) findViewById(R.id.btn_previous);btn_previous.setOnClickListener(this);btn_next.setOnClickListener(this);init(); //设置Factory}&＃64;Overridepublic void onClick(View view) {if (view.getId()&＃61;&＃61;R.id.btn_next){imageIndex&＃43;&＃43;;if(imageIndex>3){imageIndex&＃61;0;}is_1.setInAnimation(this,R.anim.left_in);is_1.setOutAnimation(this,R.anim.right_out);}else if(view.getId()&＃61;&＃61;R.id.btn_previous){imageIndex--;if(imageIndex<0){imageIndex&＃61;image.length-1;}is_1.setInAnimation(this,R.anim.right_in);is_1.setOutAnimation(this,R.anim.left_out);}is_1.setImageResource(image[imageIndex]);}&＃64;Overridepublic View makeView() {//实现viewFactory接口.生成imageviewImageView imageView&＃61;new ImageView(this);return imageView;}private void init(){//初始化imageSwitchis_1.setFactory(this);is_1.setImageResource(image[imageIndex]);}
}


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