# DesignDemo02

**Repository Path**: MaterialDisign/DesignDemo02

## Basic Information

- **Project Name**: DesignDemo02
- **Description**: meterail design 控件：TextInputLayout + BottomNavigationView + SearchView + 白天夜间模式切换
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-11-12
- **Last Updated**: 2022-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

下面介绍的内容是：TextInputLayout + BottomNavigationView + SearchView + 白天夜间模式切换

源码：https://git.oschina.net/MaterialDisign/DesignDemo02

效果图:
![这里写图片描述](http://img.blog.csdn.net/20161112185050860)

# **6 TextInputLayout** #
> 里面只可以包含一个EditView,常用的2个 方法是```setErrorEnabled(boolean)```(不可以提示错误信息) 和```setError(CharSequence)```(提示错误信息)


## **效果图** ##
![这里写图片描述](http://img.blog.csdn.net/20161112185531586)
## **xml** ##
```
<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/textInputLayout1"
    android:layout_marginTop="10dp">

    <EditText
        android:id="@+id/et_pwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="密码"
        android:imeActionId="@+id/login"
        android:imeActionLabel="登录"
        android:imeOptions="actionDone"
        android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
```
> ime是软键盘(输入法)的意思，```android:imeActionId=```是软键盘右下角按钮的id，```android:imeOptions="actionDone"```是动作意图，```android:imeActionLabel=```是显示的文字(以```imeOptions```为主)。详情[android EditText inputType 及 android:imeOptions=”actionDone”](http://blog.csdn.net/caiwenfeng_for_23/article/details/37900503)

    

## **代码** ##
```
//刚开始不显示错误信息，只有判断之后才会提示错误信息
textInputLayout1.setErrorEnabled(false);
textInputLayout2.setErrorEnabled(false);

String phone = et_phone.getText().toString().trim();
String pwd = et_pwd.getText().toString().trim();
if (TextUtils.isEmpty(phone)) {
    textInputLayout1.setError("手机号不可为空");
} else if (phone.length() != 11) {
    textInputLayout1.setError("请输入正确的手机号");
} else if (TextUtils.isEmpty(pwd)) {
    textInputLayout2.setError("密码不可为空");
} else if (pwd.length() < 6) {
    textInputLayout2.setError("密码不少于6位");
} else {
    toast.setText("登录成功");
    toast.show();
}
```
可以给软键盘的enter见设置点击事件，调用EditText的setOnEditorActionListener(...)方法
```
//设置软键盘的点击事件
et_pwd.setOnEditorActionListener(new TextView.OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
        if (id == R.id.login || id == EditorInfo.IME_ACTION_DONE) {
            loginApp();//执行登录操作
            return true;//事件被消耗
        }
        return false;
    }
});
```

# **7BottomNavigationView** #
> 可以作为底部导航栏，自带 动画效果


## **效果图：** ##
![这里写图片描述](http://img.blog.csdn.net/20161112185608103)
## **xml** ##
> 最重要的属性是```app:menu=```

```
<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#039BE5"
    app:menu="@menu/bottom_navigation_view"
    />
```
**res/menu/bottom_navigation_view.xml**
```
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/tab1"
        android:icon="@android:drawable/ic_menu_add"
        android:title="tab1"/>
    <item
        android:id="@+id/tab2"
        android:icon="@android:drawable/ic_menu_search"
        android:title="tab2"/>
    <item
        android:id="@+id/tab3"
        android:icon="@android:drawable/ic_menu_share"
        android:title="tab3"/>
    <item
        android:id="@+id/tab4"
        android:icon="@android:drawable/ic_menu_camera"
        android:title="tab4"/>
    <item
        android:id="@+id/tab5"
        android:icon="@android:drawable/ic_menu_week"
        android:title="tab5"/>
</menu>
```
## **代码** ##
```
 bottonNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.tab1:
                        toast.setText("tab1");
                        toast.show();
                        break;
                    case R.id.tab2:
                        toast.setText("tab2");
                        toast.show();
                        break;
                    ...
                }
                return true;
            }
        });
```
#**8 CollapsingToolbarLayout**#
![这里写图片描述](http://img.blog.csdn.net/20161112191033137)
> 包裹Toolbar + 其他控件，其他控件作为背景，这里已ImageView为例

```
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_activity_new"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/show_img2"/>

            <!--layout_height=wrap_content 不显示title,也就没有了title字体变小的动画效果-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"
                app:title="Toolbar"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/show_text"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
```

下面介绍些其他的内容，不属于Material Design，包含SearchView + 夜间模式 + 过度动画

# **1 SearchView ** #
![这里写图片描述](http://img.blog.csdn.net/20161112185650916)
```
<android.support.v7.widget.SearchView
    android:id="@+id/searchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/btn_login"
    android:layout_margin="10dp"
    android:background="@color/colorPrimary"
    app:queryHint="搜索中..."
    />
```
```
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    //点击软键盘输入法中的搜索按钮调用这个方法
    @Override
    public boolean onQueryTextSubmit(String query) {
        toast.setText(query);
        toast.show();
        return true;
    }

    //newText:搜索框内的整体值
    @Override
    public boolean onQueryTextChange(String newText) {
        toast.setText(newText);
        toast.show();
        return true;
    }
});
```

# **2 白天模式 + 夜间模式** #
![这里写图片描述](http://img.blog.csdn.net/20161112185729550)

> 用到的类：AppCompatDelegate 方法setDefaultNightMode(int mode) + recreate();

> 需要创建res/values-night/style.xml,主题继承自```Theme.AppCompat.DayNight```

style.xml
```
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        ...
    </style>

</resources>
```
代码；
```
btn_day.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
        recreate();
    }
});
btn_night.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
        recreate();
    }
});
```

# **3 过度动画** #
![这里写图片描述](http://img.blog.csdn.net/20161112191231437)

> 用到的类：ActivityOptionCompat + ViewCompat,用到的的方法```makeSceneTransitionAnimation(...), ViewCompat.setTransitionName(iv, "transition");```


在MAinActivity中给ImageView设置点击事件，并设置过度动画，在新打开的NewActivity中设置控件
```
iv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //ActivityOptionsCompat必须放在点击事件中
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, iv, "transition");
        startActivity(new Intent(MainActivity.this, NewActivity.class), optionsCompat.toBundle());
    }
});      
```
```
ViewCompat.setTransitionName(iv, "transition");
```