热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

目的:ImageSwitcher控件控制图片滑动样式(一)效果实现图:在图形切换控件中轮流显示,并有慢进慢出的动画效果(二)项目结构图

目的: 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:
    在这里插入图片描述


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

  1. 引入 图片4张&#xff1a;把需要的图片复制到drawable中&#xff08;注意图片png形式且不要过大&#xff09;
    在这里插入图片描述
    在这里插入图片描述

  2. 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>

  1. 我的自定义colors&#xff1a;自定义应用顶部的颜色
    在这里插入图片描述
    效果图&#xff1a;
    在这里插入图片描述
  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[]&#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;希望对大家的学习有所帮助~


推荐阅读
author-avatar
袁甲2012_498
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有