跳到主要內容

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://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/content_main"
    tools:context="com.admin.claire.androidusingbottomnavigationview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        style="@style/AppTheme.AppBarOverlay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>
    
    <include layout="@layout/content_main"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:elevation="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu_navigation"/>

</android.support.constraint.ConstraintLayout>

content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
Next, we need to create three layout files for three different fragments which get displayed when the Bottom Navigation menu item is clicked.

fragment_home.xml
<android.support.constraint.ConstraintLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.admin.claire.androidusingbottomnavigationview.fragment.HomeFragment">
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/action_home"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

fragment_profile.xml
<android.support.constraint.ConstraintLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.admin.claire.androidusingbottomnavigationview.fragment.ProfileFragment">
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/action_profile"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

fragment_settings.xml
<android.support.constraint.ConstraintLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.admin.claire.androidusingbottomnavigationview.fragment.SettingsFragment">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/action_settings"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

Creating Fragment

創建三個Fragments HomeFragment，ProfileFragment，SettingsFragment來擴充Fragment佈局

HomeFragment.java
public class HomeFragment extends Fragment {
    
    public HomeFragment() {
        // Required empty public constructor
    }

    public static HomeFragment newInstance(){
        return new HomeFragment();
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
ProfileFragment，SettingsFragment 相同建立一個靜態方法

Creating Activity

MainActivity.java
package com.admin.claire.androidusingbottomnavigationview;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.admin.claire.androidusingbottomnavigationview.fragment.HomeFragment;
import com.admin.claire.androidusingbottomnavigationview.fragment.ProfileFragment;
import com.admin.claire.androidusingbottomnavigationview.fragment.SettingsFragment;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView mBottomNavigationView;

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

        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        setupBottomNavigation();

    }

    private void setupBottomNavigation() {
        mBottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);

        mBottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_home:
                        loadHomeFragment();
                        return true;

                    case R.id.action_profile:
                        loadProfileFragment();
                        return true;

                    case R.id.action_settings:
                        loadSettingsFragment();
                        return true;
                }
                return false;
            }
        });
    }

    private void loadHomeFragment() {
        HomeFragment fragment = HomeFragment.newInstance();
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }

    private void loadProfileFragment(){
        ProfileFragment fragment = ProfileFragment.newInstance();
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }

    private void loadSettingsFragment(){
        SettingsFragment fragment = SettingsFragment.newInstance();
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.fragment_frame, fragment);
        ft.commit();
    }
}

References

留言

張貼留言

這個網誌中的熱門文章

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...
張貼留言
閱讀完整內容

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</str...
張貼留言
閱讀完整內容