Android iOS 挖挖挖: UI

顯示具有 UI 標籤的文章。顯示所有文章

2016年7月26日星期二

Android Transitions Scene 動態UI

Android的api: android.transition 提供基本的UI動畫 Min Sdk Version: API 21: Android 5.0 (Lollipop) -才有Slide,Explode...
1.activity_main.xml

2.scene2.xml

3.MainActivity.java

package com.terryyamg.transitionstest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.transition.Explode;
import android.transition.Scene;
import android.transition.Slide;
import android.transition.TransitionManager;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    private ViewGroup transitionsContainer;
    private Scene scene1, scene2;
    private Button btnShowBottomText, btnSlide;
    private TextView tv1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        transitionsContainer = (ViewGroup) findViewById(R.id.transitions_container);
        scene1 = Scene.getSceneForLayout(transitionsContainer, R.layout.activity_main, this); //初始畫面
        scene2 = Scene.getSceneForLayout(transitionsContainer, R.layout.scene2, this); //第二畫面
        setting();

    }

    private void setting() {
        btnShowBottomText = (Button) transitionsContainer.findViewById(R.id.btnShowBottomText);
        tv1 = (TextView) transitionsContainer.findViewById(R.id.tv1);
        btnSlide = (Button) transitionsContainer.findViewById(R.id.btnSlide);
    }

    public void showBottomText(View view) {
        Log.i("show", "showBottomText");
        TransitionManager.beginDelayedTransition(transitionsContainer); //預設 new Fade()
        toggleVisibility(tv1);
    }

    public void slide(View view) {
        Log.i("show", "slide");
        TransitionManager.beginDelayedTransition(transitionsContainer, new Slide()); //滑動 ex:Slide(Gravity.RIGHT)..
        toggleVisibility(btnShowBottomText);
    }

    public void explode(View view) {
        Log.i("show", "explode");
        TransitionManager.beginDelayedTransition(transitionsContainer, new Explode()); //爆炸 隨意方向
        toggleVisibility(btnShowBottomText, btnSlide);
    }

    public void goToScene1(View view) {
        TransitionManager.go(scene1); //回到初始頁面
        setting();
    }

    public void goToScene2(View view) {
        TransitionManager.go(scene2); //前往第二頁面
        setting();
    }

    private static void toggleVisibility(View... views) {
        for (View view : views) {
            boolean isVisible = view.getVisibility() == View.VISIBLE;
            view.setVisibility(isVisible ? View.GONE : View.VISIBLE); //隱藏或顯示
        }
    }

}

檔案下載:
https://github.com/terryyamg/TransitionsTest
參考連結:
http://www.androiddesignpatterns.com/2014/12/activity-fragment-transitions-in-android-lollipop-part1.html
https://possiblemobile.com/2013/11/new-transitions-framework/
http://www.techotopia.com/index.php/Implementing_Android_Scene_Transitions_%E2%80%93_A_Tutorial

2015年6月4日星期四

Android Studio Import libs 專案匯入套件 UI 美化

Android Studio專案套件匯入與eclipse匯入方式不同
1.首先建立一個空白專案，建立完成後打開在app下的build.gradle檔案

2.以https://github.com/rey5137/material UI 為例，在build.gradle檔案加入

compile 'com.android.support:appcompat-v7:21.0.3'

compile 'com.github.rey5137:material:1.1.1'

compile 'com.android.support:cardview-v7:21.0.3'

3.基本上在這裡點選Build -> Clear Project 就會下載匯入在你的專案裡

4.在專案點右鍵 -> Open Module Settings中的Dependencies裡可以看到匯入的lib

5.下載https://github.com/rey5137/material/archive/master.zip 拿裡面的demo檔來測試
位置在下載的資料夾material-master\app\src\main，在這裡先測試button原件
將material-master\app\src\main\res除了layout資料夾其他資料夾複製到你的專案底下 res的位置

6.在專案res/下建立layout資料夾，建立activity_main.xml，複製material-master\app\src\main\res\layout\fragment_button.xml裡的程式碼

7.建立MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

import com.rey.material.drawable.RippleDrawable;
import com.rey.material.widget.Button;
import com.rey.material.widget.FloatingActionButton;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button bt_flat = (Button) findViewById(R.id.button_bt_flat);
        Button bt_flat_color = (Button) findViewById(R.id.button_bt_flat_color);
        Button bt_flat_wave = (Button) findViewById(R.id.button_bt_flat_wave);
        Button bt_flat_wave_color = (Button) findViewById(R.id.button_bt_flat_wave_color);
        Button bt_raise = (Button) findViewById(R.id.button_bt_raise);
        Button bt_raise_color = (Button) findViewById(R.id.button_bt_raise_color);
        Button bt_raise_wave = (Button) findViewById(R.id.button_bt_raise_wave);
        Button bt_raise_wave_color = (Button) findViewById(R.id.button_bt_raise_wave_color);
        FloatingActionButton bt_float = (FloatingActionButton) findViewById(R.id.button_bt_float);
        FloatingActionButton bt_float_color = (FloatingActionButton) findViewById(R.id.button_bt_float_color);
        FloatingActionButton bt_float_wave = (FloatingActionButton) findViewById(R.id.button_bt_float_wave);
        FloatingActionButton bt_float_wave_color = (FloatingActionButton) findViewById(R.id.button_bt_float_wave_color);

        /*左邊正常速度*/
        View.OnClickListener listener = new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (v instanceof FloatingActionButton) {
                    FloatingActionButton bt = (FloatingActionButton) v;
                    bt.setLineMorphingState((bt.getLineMorphingState() + 1) % 2, true);
                }

                System.out.println(v + " " + ((RippleDrawable) v.getBackground()).getDelayClickType());
            }
        };
        /*右邊DELAY速度*/
        View.OnClickListener listener_delay = new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (v instanceof FloatingActionButton) {
                    FloatingActionButton bt = (FloatingActionButton) v;
                    bt.setLineMorphingState((bt.getLineMorphingState() + 1) % 2, true);
                }

                System.out.println(v + " " + ((RippleDrawable) v.getBackground()).getDelayClickType());
            }
        };

        /*監聽事件*/
        bt_flat.setOnClickListener(listener);
        bt_flat_wave.setOnClickListener(listener);
        bt_raise.setOnClickListener(listener);
        bt_raise_wave.setOnClickListener(listener);
        bt_float.setOnClickListener(listener);
        bt_float_wave.setOnClickListener(listener);

        bt_flat_color.setOnClickListener(listener_delay);
        bt_flat_wave_color.setOnClickListener(listener_delay);
        bt_raise_color.setOnClickListener(listener_delay);
        bt_raise_wave_color.setOnClickListener(listener_delay);
        bt_float_color.setOnClickListener(listener_delay);
        bt_float_wave_color.setOnClickListener(listener_delay);

    }

}

8.最後修改一下AndroidManifest.xml