【Android】 _UI設計_圖片滑動樣式
阿新 • • 發佈:2018-12-03
目的:
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]);
}
}
以上就是本文的全部內容,希望對大家的學習有所幫助~