一、Toolbar 標題欄
它的出現規範並拓展了APP標題欄的設計風格,極大地提高了開發效率,而且Material Design設計規範也越來越多出現在我們常用的APP中,因此有必要了解。
下面是一個較簡單的示例,
(1)界面佈局XML
<android.support.v7.widget.Toolbar
android:id="@+id/my_tb"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="48dp"
android:background="#22FFFF00"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@drawable/back"
app:subtitle="天下無雙"
app:title="Toolbar"/>
(2)MainActivity.java
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
finish();
break;
case R.id.tab_add:
Toast.makeText(MainActivity.this," tab add",Toast.LENGTH_SHORT)
.show();
break;
case R.id.tab_about:
Toast.makeText(MainActivity.this," tab about",Toast.LENGTH_SHORT)
.show();
break;
case R.id.tab_before:
Toast.makeText(MainActivity.this," tab before",Toast.LENGTH_SHORT)
.show();
break;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu); //加載menu
return super.onCreateOptionsMenu(menu);
}
Toolbar中包含NavigationIcon、logo、正副標題、菜單選項、自定義view等,詳細見這位大神的小結。
Toolbar的正確使用姿勢
二、CardView
酷炫的卡片佈局,可以滿足跟多人的酷炫風。下面是簡單的示例
(1)佈局XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/my_tb"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="48dp"
android:background="#22FFFF00"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@drawable/back"
app:subtitle="天下無雙"
app:title="Toolbar"/>
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="6dp"
android:layout_marginTop="28dp"
android:layout_margin="15dp"
style="@style/MyBaseCard"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_img"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_gravity="center"
android:padding="5dp"
android:src="@drawable/header"/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#E8E9EA"
android:layout_gravity="center"
android:text="艾瑞克"
android:textColor="@color/colorAccent"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
(2)MainActivity.java
public class MainActivity extends AppCompatActivity {
private Toolbar myToolbar;
private CardView cardView;
private int count = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myToolbar = findViewById(R.id.my_tb);
cardView = findViewById(R.id.cardView);
setSupportActionBar(myToolbar); //讓Toolbar代替Actionbar
cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
setAnim();
}
});
}
private void setAnim() { //點擊卡片產生平移效果
cardView.animate().translationX(100 + count).setDuration(1000).start();
count += 100;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) { //button點擊事件
switch (item.getItemId()){
case android.R.id.home:
finish();
break;
case R.id.tab_add:
Toast.makeText(MainActivity.this," tab add",Toast.LENGTH_SHORT)
.show();
break;
case R.id.tab_about:
Toast.makeText(MainActivity.this," tab about",Toast.LENGTH_SHORT)
.show();
break;
case R.id.tab_before:
Toast.makeText(MainActivity.this," tab before",Toast.LENGTH_SHORT)
.show();
break;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) { //重寫此方法後,action menu就會顯示
getMenuInflater().inflate(R.menu.menu,menu); //加載menu
return super.onCreateOptionsMenu(menu);
}
}
三、沉侵式狀態欄
將需要此形式的 activity 的 theme 設置成如下style即可。
<!--values-v19.v19 開始有 android:windowTranslucentStatus 這個屬性-->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
<!--values-v21.5.0 以上提供了 setStatusBarColor() 方法設置狀態欄顏色。-->
<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<!--Android 5.x開始需要把顏色設置透明,否則導航欄會呈現系統默認的淺灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>