安卓Design包之NavigationView結合DrawerLayout,toolbar的使用,FloatingActionButton

標籤：

FloatingActionButton

懸浮按鈕:FloatingActionButton是重寫ImageView的，所有FloatingActionButton擁有ImageView的一切屬性。

• app:backgroundTint - 設定FAB的背景顏色。
• app:rippleColor - 設定FAB點擊時的背景顏色。
• app:borderWidth - 該屬性尤為重要，如果不設定0dp，那麼在4.1的sdk上FAB會顯示為正方形，而且在5.0以後的sdk沒有陰影製作效果。所以設定為borderWidth="0dp"。
• app:elevation - 預設狀態下FAB的陰影大小。
• app:pressedTranslationZ - 點擊時候FAB的陰影大小。
• app:fabSize - 設定FAB的大小，該屬性有兩個值，分別為normal和mini，對應的FAB大小分別為56dp和40dp。
• src - 設定FAB的表徵圖，Google建議符合Design設計的該表徵圖大小為24dp。
• app:layout_anchor - 設定FAB的錨點，即以哪個控制項為參照點設定位置。
• app:layout_anchorGravity - 設定FAB相對錨點的位置，值有 bottom、center、right、left、top等。

    <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom = "true"            android:layout_alignParentRight = "true"            android:layout_margin="20dp"            android:src="@mipmap/ic_launcher"/>

效果:

:

 

NavigationView

　　　　 通過提供抽屜導航所需的架構讓實現更簡單，同時它還能夠直接通過菜單資源檔直接產生導航元素。把NavigationView作為DrawerLayout的內容視圖來使用。NavigationView處理好了和狀態列的關係，可以確保NavigationView在API21+裝置上正確的和狀態列互動。

xml檔案:

利用drawerLayout作為父布局,可以實現側滑的功能

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    tools:context="fanggao.qf.toolbar_drawerlayout_navigationview_floactionbar_snackbar.MainActivity"><!--主介面-->    <RelativeLayout        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.support.v7.widget.Toolbar>        <!--懸浮的圓-->        <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom = "true"            android:layout_alignParentRight = "true"            android:layout_margin="20dp"            android:src="@mipmap/ic_launcher"/>    </RelativeLayout><!--左側菜單   android:layout_gravity = "start" 在布局的左側--><android.support.design.widget.NavigationView    android:layout_width="250dp"    android:layout_height="match_parent"    android:layout_gravity = "start"    app:headerLayout = "@layout/layout_header"    app:menu="@menu/menu"/></android.support.v4.widget.DrawerLayout>

View Code

layout_header.xml

側滑菜單中的標題頭:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#aaaaaa">    <ImageView        android:id="@+id/img_icon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:src="@mipmap/ic_launcher"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="HELLO"        android:layout_below="@id/img_icon"        android:textSize="30sp"        android:layout_margin="20dp"        android:layout_centerHorizontal="true"/></RelativeLayout>

View Code

menu.xml菜單布局

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <!-- menu支援分組和子標題，但是子標題不支援icon-->    <!--單選-->    <group>        <item            android:title="啟用"            android:icon="@mipmap/ic_launcher">        </item>        <item            android:title="會員"            android:icon="@mipmap/ic_launcher">        </item>        <item            android:title="錢包"            android:icon="@mipmap/ic_launcher">        </item>    </group>    <!--菜單-->    <item        android:title="選項"        android:icon="@mipmap/ic_launcher">        <menu>            <item            android:title="收藏"></item>            <item                android:title="好評"></item>        </menu>    </item></menu>

main:

public class MainActivity extends AppCompatActivity {    private Toolbar toolbar;    private DrawerLayout drawerLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity1_main);        toolbar = (Toolbar) findViewById(R.id.toolbar);        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        //設定主標題        toolbar.setTitle("標題");        //設定副標題        toolbar.setSubtitle("標題的子類");        //設定表徵圖        toolbar.setLogo(R.mipmap.ic_launcher);        //設定Toolbar和DrawerLayout實現動畫和聯動        this.setSupportActionBar(toolbar);        //左側菜單與toolbar聯動        // 給左上方表徵圖的左邊加上一個返回的表徵圖        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        getSupportActionBar().setHomeButtonEnabled(true); //設定返回鍵可用        //ActionBarDrawerToggle可以監聽抽屜開合事件,可以認為是DrawerListener的子類        //聲明mDrawerToggle對象,其中R.string.open和R.string.close簡單可以用"open"和"close"替代        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(MainActivity.this, drawerLayout, R.string.open, R.string.close){            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);                Log.i("tag", "onDrawerOpened: ");            }            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);                Log.i("tag", "onDrawerClosed: ");            }        };        //使得表徵圖和抽屜拉合保持同步        actionBarDrawerToggle.syncState();        //監聽實現側邊欄的拉開和閉合,即抽屜drawer的閉合和開啟        drawerLayout.addDrawerListener(actionBarDrawerToggle);    }}

效果:

 

 

 

安卓Design包之NavigationView結合DrawerLayout,toolbar的使用,FloatingActionButton