Material Design related knowledge points (1)

AppTheme some chores

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

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!--  无标题栏的窗口-->
   <!-- <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>-->
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorAccent</item>
        <!--手机顶部显示时间的那一行颜色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <!-- 手机app内容的背景颜色-->
        <item name="android:windowBackground">#009688</item>
        <!--一些控件选中状态会使用-->
        <item name="colorAccent">#ff00</item>
        <!--目前的手机用不上-->
        <!--<item name="android:navigationBarColor">#ff00</item>-->
        <!--<item name="android:textColorPrimary">#FFEB3B</item>-->
    </style>
</resources>

Insert picture description here

Use of ToolBar

If we set the theme to <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
we can use ToolBar to achieve the same effect

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
       >
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="30sp"
    android:text="欢迎使用Toolbar"/>
    </androidx.appcompat.widget.Toolbar>

</FrameLayout>

Insert picture description here
If we don’t want to write text controls by ourselves, we can also operate on the label attribute in the manifest

   <activity android:name=".MainActivity"
            android:label="欢迎使用MaterrialDesign">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

As mentioned above, the label attribute is set for the current activity. If you allow the program now, the title will not be displayed for you. At this time, you need to find the toolbar control in the java code and use the setSupportActionBar(); method. Display
renderings:
Insert picture description here


public class MainActivity extends AppCompatActivity {
    
    

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar  = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }


}

Insert picture description here
Note that there will be toolbars in two packages. I used Androidx. The specific package depends on the package you use. If the content of a package setSupportActionBar displays an error, you can change to another package.

ToolBar+Menu menu mixed together

On some title bars, we also hope that there will be some buttons, and corresponding events will appear after clicking,
then the buttons on the title bar are actually menu bars one by one
(1) First create a menu folder, and create a menu in this folder , Set the content of each menu bar inside
Insert picture description here
Insert picture description here
(2) In the menu, you can create multiple items in the tab, and each menu button
can set the id, which is convenient for setting click events for it later. The icon is like an icon, title: The title
showAsAction can have three attributes: always, never, ifRoom

Always let the menu bar be displayed on the title bar,
never be used to display in the menu,
ifRoom means that it will be displayed in the Toolbar if there are enough screen controls, otherwise it will be displayed in the menu.

Specific effects will be shown later

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/backup"
    android:icon="@drawable/add"
    android:title="添加"
    app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/delete"
        android:title="删除"
        app:showAsAction="always"/>
</menu>

All is always
Insert picture description here
all is never
Insert picture description here
all ifRoom
Insert picture description here

Set the layout for the menu

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    
    
        getMenuInflater().inflate(R.menu.menu_item,menu);
        return true;
    }

Override onCreateOptionsMenu, and return true at the end, otherwise it will have no effect

Set click event

Override onOptionsItemSelected, and judge which menu was clicked through switch, and finally reurn true

   @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    
    
        switch (item.getItemId()){
    
    
            case  R.id.delete:
            Toast.makeText( MainActivity.this,"你点击了回收站",Toast.LENGTH_SHORT).show();
            break;
            case  R.id.backup:
                Toast.makeText( MainActivity.this,"你点击了添加按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return  true;
    }

Guess you like

Origin blog.csdn.net/qq_45353823/article/details/107773312