Toolbar + CardView

1 篇文章 0 订阅
1 篇文章 0 订阅

一、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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值