跳到主要內容

Material Design - CoordinatorLayout & FlationActionBar & Snackbar

 

Meterial Design - Floating Action Button

需要在build.gradle 加入
compile 'com.android.support:design:25.3.1'

elevation 陰影高度
pressedTranslationZ按下的時候陰影就會增大
 <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:elevation="6dp"
            app:pressedTranslationZ="12dp"
            android:clickable="true"
            app:backgroundTint="@color/purpleColorPrimary"
            app:rippleColor="@color/colorAccent"
            app:fabSize="normal"
            app:srcCompat="@android:drawable/ic_input_add"
            android:layout_gravity="bottom|end"/>

Meterial Design - Snackbar

Snack bar 跟 Toast 不同的是，Snack bar 是以 view 作參數，而不是以 context
Snackbar.make(contentView, "It is Snackbar!!!", Snackbar.LENGTH_SHORT).show();

Snackbar加上「行動」按鍵的話，可以使用setAction( );
Snackbar.make(textDrawerItemName,menuItem.getTitle() + "pressed",
                        Snackbar.LENGTH_SHORT).show();

Meterial Design-CoordinatorLayout

CoordinatorLayout 是 FrameLayout 的強化版，主要有以下兩個作用:
1.作為頂層佈局
2.協調個子佈局之間的容器

當設計元件時，FAB放至右下角， Snackbar 時，會擋住FAB，這時後就要使CoordinatorLayoutayout_anchor：設置 FAB 的錨
layout_anchorGravity：設置相對錨點的位置，如bottom|right表示 FAB 位於錨點的右下角。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/drawer_layout"">


    <android.support.design.widget.CoordinatorLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">


        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:background="?attr/colorPrimary"

            android:minHeight="?attr/actionBarSize"

            android:theme="?attr/actionBarTheme"/>


        <LinearLayout

            android:id="@+id/anchorView"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="vertical">


        <TextView

            android:id="@+id/textDrawerItemName"

            android:layout_marginTop="?attr/actionBarSize"

            android:padding="16dp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="bottom|center_horizontal"

            android:text="@string/drawer_item"

            app:layout_anchor="@+id/toolbar"

            app:layout_anchorGravity="bottom|center_horizontal"/>

        </LinearLayout>

      

        <android.support.design.widget.FloatingActionButton

            android:id="@+id/fab"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="16dp"

            android:elevation="6dp"

            app:pressedTranslationZ="12dp"

            android:clickable="true"

            app:backgroundTint="@color/purpleColorPrimary"

            app:rippleColor="@color/colorAccent"

            app:fabSize="normal"

            app:srcCompat="@android:drawable/ic_input_add"

            app:layout_anchor="@id/anchorView"

            app:layout_anchorGravity="bottom|right"/>

    </android.support.design.widget.CoordinatorLayout>


    <android.support.design.widget.NavigationView

        android:id="@+id/navigation_view"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        app:headerLayout="@layout/drawer_header"

        app:menu="@menu/drawer_menu"/>

</android.support.v4.widget.DrawerLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;

    ActionBarDrawerToggle drawerToggle; //在Toolbar上加上「三」圖示

    TextView textDrawerItemName;

    DrawerLayout drawerLayout;

    NavigationView nav_View;

    FloatingActionButton fab;

    private static final String NAV_ITEM_ID = "nav_index";

    //用來儲存點擊了的 menuItem id,必免旋轉螢幕後 menu 和 textDrawerItemName 會被重設

    private int navItemId;

 

 @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //view

        initView();

        //Handler

        initDrawerLayout();

        initNavigationView(savedInstanceState);

        initFab();

    }


    private void initView() {
        // Set a Toolbar to replace the ActionBar.
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        textDrawerItemName = (TextView)findViewById(R.id.textDrawerItemName);
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
        nav_View = (NavigationView)findViewById(R.id.navigation_view);
        fab = (FloatingActionButton)findViewById(R.id.fab);

    }


    private void initDrawerLayout() {
        drawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,
                R.string.open_drawer,R.string.close_drawer){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };

        drawerLayout.addDrawerListener(drawerToggle);
        drawerToggle.syncState();
    }


    private void initNavigationView(Bundle savedInstanceState ) {
        nav_View.setNavigationItemSelectedListener(new  NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //Snack bar 跟 Toast 不同的是，Snack bar 是以 view 作參數，而不是以 context
                Snackbar.make(textDrawerItemName,menuItem.getTitle() + "pressed",
                        Snackbar.LENGTH_SHORT).show();

                navigateTo(menuItem);
                drawerLayout.closeDrawers();
                return true;
            }
        });

        //利用Bundle 取出儲存的資料
        if (null != savedInstanceState){
            navItemId = savedInstanceState.getInt(NAV_ITEM_ID, R.id.navigation_item_1);
        }else {
            navItemId = R.id.navigation_item_1;
        }

        navigateTo(nav_View.getMenu().findItem(navItemId));

    }


    private void navigateTo(MenuItem menuItem) {
        textDrawerItemName.setText(menuItem.getTitle());
        //這裡會用 navItemId 記著當前的 menuItem。
        navItemId = menuItem.getItemId();
        menuItem.setCheckable(true);

    }


    //之後再用 onSaveInstanceState() 來記著當前的 navItemId
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        //裝目前狀態值存儲起來
        outState.putInt(NAV_ITEM_ID, navItemId);
    }


    private void initFab(){
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(textDrawerItemName, "Snack bar!!!!",Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                new AlertDialog.Builder(MainActivity.this)
                                        .setMessage("Undo pressed")
                                        .setNeutralButton("OK", null)
                                        .show();
                            }
                        }).show();
            }
        });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }



    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case R.id.action_settings:
                Snackbar.make(textDrawerItemName,item.getTitle(),

                 Snackbar.LENGTH_SHORT).show();
                return true;
            default:
        }

        return super.onOptionsItemSelected(item);
    }

}


留言

張貼留言

這個網誌中的熱門文章

SQLite - RecyclerView and SearchView

設計資料庫表格 建立資料庫表格使用SQL的「CREATE TABLE」指令，這個指令需要指定表格的名稱， 還有這個表格用來儲存每一筆資料的欄位（Column）。 這些需要的表格欄位可以對應到主要類別中的欄位變數， 不過SQLite資料庫的資料型態只有下面這幾種，使用它們來決定表格欄位可以儲存的資料型態： INTEGER – 整數，對應Java 的byte、short、int 和long。 REAL – 小數，對應Java 的float 和double。 TEXT – 字串，對應Java 的String。 一個SQLite表格建議一定要包含一個可以自動為資料編號的欄位，欄位名稱固定為「 _id 」，型態為「INTEGER」。 後面加上「 PRIMARY KEY AUTOINCREMENT 」的設定，就可以讓SQLite自動為每一筆資料編號。 建立SQLiteOpenHelper類別 Android 提供許多方便與簡單的資料庫API，可以簡化應用程式處理資料庫的工作。 這些API都在「android.database.sqlite」套件，它們可以用來執行資料庫的管理和查詢的工作。 這個套件中的「 SQLiteOpenHelper 」類別，可以在應用程式中執行 建立資料庫與表格 的工作，應用程式第一次在裝置執行的時候，由它負責建立應用程式需要的資料庫與表格， 後續執行的時候開啟已經建立好的資料庫讓應用程式使用。 還有應用程式在運作一段時間以後，如果增加或修改功能，資料庫的表格也增加或修改了 ，它也可以為應用程式執行資料庫的修改工作，讓新的應用程式可以正常的運作。 Create New Java Class public class MyDBHelper extends SQLiteOpenHelper{ //資料庫名稱 public static final String DATABASE_NAME = "mydata.db"; //資料庫版本，資料結構改變的時後要更改這個數字，通常是加一 public static final int VERSION = 1; //資料庫物件，固定的欄位變數 private static SQLiteDatabase
張貼留言
閱讀完整內容

Android using BottomNavigationView

Creating Navigation Menu menu_navigation.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_home" android:icon="@drawable/ic_home" android:title="@string/action_home"/> <item android:id="@+id/action_profile" android:icon="@drawable/ic_person" android:title="@string/action_profile"/> <item android:id="@+id/action_settings" android:icon="@drawable/ic_settings" android:title="@string/action_settings"/> </menu> Creating Layout main_activity.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://
張貼留言
閱讀完整內容

Material Design - Card View and Recycler View

build.gradle (Module.app) 添加CardView，RecyclerView和Glide依賴關係。  RecyclerView用於以網格方式顯示相冊。  CardView用於顯示單個專輯項目。  Glide用於顯示專輯封面圖片。 dependencies {      //CardView     compile 'com.android.support:cardview-v7:25.3.1'     //RecyclerView     compile 'com.android.support:recyclerview-v7:25.3.1'     //Glide ImageLoader....     compile 'com.github.bumptech.glide:glide:3.7.0' } 將以下字符串，顏色和調整資源添加到strings.xml，colors.xml和dimensions.xml文件。 string.xml <resources> <string name="app_name">Card View</string> <string name="action_settings">Settings</string> <string name="action_add_favourite">Add to Favourites</string> <string name="action_play_next">Play Next</string> <string name="backdrop_title">LOVE MUSIC</string> <string name="backdrop_subtitle">This season top 20 albums</string> </resources>
張貼留言
閱讀完整內容