FloatingActionButton, TextInputLayout, Snackbar, and TabLayout of the new Android M control, and androidtablayout

FloatingActionButton, TextInputLayout, Snackbar, and TabLayout of the new Android M control, and androidtablayout

[Reprint please indicate the source: http://blog.csdn.net/feiduclear_up/article/details/46500865 CSDN ruins tree]

Recently, at Google's 2015 I/O conference, the new Android version M was released. It seems that Android has not been named as a digital version since this version.

At this I/O conference, Google has not significantly changed Android, mainly by modifying and improving the previous Android L version. But it was launched at Google.

After the Design style of the Material Design, it is still compatible with many styles, such as the RecyclerView, CardView, and Palette of the v7 package.

This I/O conference also continued to improve the MD Design Support Library. This time, Google launched the Android Design Support Library, which is fully supported.

MD design style UI effect. The Design Support Library contains eight new material design components! Android is supported at least.

2.1. In fact, many components are quite popular on Github, but Google has made it official and easy for developers to use. Let's learn today

FloatingActionButton, TextInputLayout, Snackbar, and TabLayout controls.

Prerequisites

To use these material design components, you need to update the Extras support library in the latest SDK, such:

Ps: In the country facing up, such updates need to be turned over or used as agents. You can find a solution on your own.

After the update, introduce the following package under the build. gralde file:

compile 'com.android.support:design:22.2.0'

Now, we can start using the Material Design component! Let's see what's special about the new component!

FloatingActionButton

As the name suggests: This is a floating button. Come on! Ps: No UI blog is very painful.

The above are three floatingactionbuttons with different effects. The XML layout code is as follows:

  <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"             />

Because FloatingActionButton overrides ImageView, all floatingactionbuttons have all attributes of ImageView. To

To control the FloatingActionButton size, background color, and shadow depth, we can use the following attributes to control these effects:

<item name="colorAccent">#ff0000</item>

Color. For more information about how to use the Toolbar and Theme of Android5.x, see http://blog.csdn.net/feiduclear_up/article/details/46457433.
3. app: elevation: FloatingActionButton shadow depth. The shadow depth is shadow by default. If you think the shadow depth is large by default, you can change this attribute to modify the shadow depth.

The preceding three XML layout codes are as follows:

  <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <android.support.design.widget.FloatingActionButton            android:id="@+id/btn"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"            app:fabSize="mini" />        <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"             />        <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"            app:backgroundTint="#000af4"            app:fabSize="normal"            app:elevation="1dp"             />    </LinearLayout>

Notes

TextInputLayout

This control is used in the EditView input box. It mainly solves the problem that the hint attribute prompt disappears when EditView received focus editing.

It is not very good when there are multiple EditView input boxes, because it is very likely that the user does not know the need for the current EditView after entering multiple editviews

Enter the content. To solve this problem, TextInputLayout was born. TextInputLayout is inherited from LinearLayout

Layout, so we need to include the EditView in TextInputLayout to use it. The implication is that TextInputLayout cannot be a single

Use only. If you don't talk nonsense, go first:

The XML layout code is as follows:

 <android.support.design.widget.TextInputLayout        android:id="@+id/textInput"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:textColor="@android:color/black"/>    </android.support.design.widget.TextInputLayout>

The Code also shows that TextInputLayout contains EditView.

To achieve the above results, we also need to add the following code:

Final TextInputLayout inputLayout = findView (R. id. textInput); inputLayout. setHint ("Enter name:"); EditText editText = inputLayout. getEditText (); editText. addTextChangedListener (new TextWatcher () {@ Override public void beforeTextChanged (CharSequence s, int start, int count, int after) {}@ Override public void onTextChanged (CharSequence s, int start, int before, int count) {if (s. length ()> 4) {inputLayout. setErrorEnabled (true); inputLayout. setError ("the name length cannot exceed 4");} else {inputLayout. setErrorEnabled (false); }}@ Override public void afterTextChanged (Editable s ){}});

TextInputLayout not only enables the EditView prompt to pop up on the EditView, but also displays the error information under the EditView.

Common Methods for TextInputLayout are as follows:

Notes

[Reprint please indicate the source: http://blog.csdn.net/feiduclear_up/article/details/46500865 CSDN ruins tree]

Use of Snackbar

Snackbar provides a lightweight control between Toast and AlertDialog, which can easily provide message prompts and action feedback.

A lot of nonsense, sister ,:

The use of Snackbar is similar to that of Toast. The call code is as follows:

Final Snackbar snackbar = Snackbar. make (inputLayout, "test pop-up prompt", Snackbar. LENGTH_LONG); snackbar. show (); snackbar. setAction ("cancel", new View. onClickListener () {@ Override public void onClick (View v) {snackbar. dismiss ();}});

The first parameter View can be any view object in the current parent layout. The subsequent parameters are the same as the Toast parameters. Snackbar is supported.

Set Action events by using public Snackbar setAction (CharSequence text, View. OnClickListener listener). You can also set multiple Action events for Snackbar. The font color of Action uses the following colors in the system subject by default.

<item name="colorAccent">#ff0000</item>

Of course, you can use the code to change the font color of the Action: Snackbar setActionTextColor (int color );

Note:

TabLayout

Tabs Tab. The effect is similar to that of Netease news client. In fact, there are many methods to implement the Tabs tab, and there are also many good methods on Github.

The open-source control that Google uses is only official this time, so that developers can use it conveniently without referencing third-party libraries. :

The XML layout is as follows:

<Android. support. design. widget. TabLayout android: id = "@ + id/tabs" <! -- Color of the Selected Tab font --> app: tabSelectedTextColor = "@ android: color/holo_blue_bright" <! -- Color of the unselected Tab font --> app: tabTextColor = "@ android: color/black" <! -- Color of the Tab indicator --> app: tabIndicatorColor = "@ android: color/holo_blue_bright" android: layout_width = "match_parent" android: layout_height = "wrap_content"/>

There are three common attributes:

Common TabLayout methods are as follows:
-AddTab (TabLayout. Tab tab, int position, boolean setSelected) is added to layout.
-AddTab (TabLayout. Tab tab, boolean setSelected) is the same
-AddTab (TabLayout. Tab tab) is the same
-GetTabAt (int index) to obtain the tab
-GetTabCount (): returns the total number of tabs.
-GetTabGravity (): returns the Gravity of the tab.
-GetTabMode (): returns the tab mode.
-GetTabTextColors (): Obtain the text color in the tab.
-NewTab (): Create a new tab
-RemoveAllTabs () removes all tabs.
-RemoveTab (TabLayout. Tab): removes the specified tab.
-RemoveTabAt (int position): removes the tab at the specified position.
-SetOnTabSelectedListener (TabLayout. OnTabSelectedListener onTabSelectedListener) adds a selection listener for each tab.
-SetScrollPosition (int position, float positionOffset, boolean updateSelectedText)
-SetTabGravity (int gravity): Set Gravity.
-SetTabMode (int mode): sets the Mode. There are two values: TabLayout. MODE_SCROLLABLE and TabLayout. MODE_FIXED indicates whether horizontal sliding is supported when the tab content exceeds the screen width. The first option supports sliding, and the second option does not. horizontal sliding is not supported by default.
-SetTabTextColors (ColorStateList textColor): Set the text color in the tab.
-SetTabTextColors (int normalColor, int selectedColor)
-SetTabsFromPagerAdapter (PagerAdapter adapter): Set PagerAdapter
-SetupWithViewPager (ViewPager viewPager) is linked with ViewPager

Generally, TabLayout is used together with ViewPager to take advantage of it. Now we can use the code to see how to use the above method.

ViewPager = findView (R. id. viewPager); tabLayout = findView (R. id. tabs); List <String> tabList = new ArrayList <> (); tabList. add ("Tab1"); tabList. add ("Tab2"); tabList. add ("Tab3"); tabLayout. setTabMode (TabLayout. MODE_FIXED); // sets the tab mode. Currently, it is the default tabLayout mode. addTab (tabLayout. newTab (). setText (tabList. get (0); // Add the tab tabLayout. addTab (tabLayout. newTab (). setText (tabList. get (1); tabLayout. addTab (tabLayout. n EwTab (). setText (tabList. get (2); List <Fragment> fragmentList = new ArrayList <> (); for (int I = 0; I <tabList. size (); I ++) {Fragment f1 = new TabFragment (); Bundle bundle = new Bundle (); bundle. putString ("content", "http://blog.csdn.net/feiduclear_up \ n CSDN ruins Tree"); f1.setArguments (bundle); fragmentList. add (f1);} TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter (getSupportFragmentMana Ger (), fragmentList, tabList); viewPager. setAdapter (fragmentAdapter); // set the adapter tabLayout. setupWithViewPager (ViewPager) for viewPager; // associate TabLayout with ViewPager. TabLayout. setTabsFromPagerAdapter (fragmentAdapter); // set an adapter for Tabs

I will not explain it. There are comments. Let's take a look at the TabFragmentAdapter and TabFragment implementations of the above Code as follows:

TabFragmentAdapter

public class TabFragmentAdapter extends FragmentStatePagerAdapter {    private List<Fragment> mFragments;    private List<String> mTitles;    public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {        super(fm);        mFragments = fragments;        mTitles = titles;    }    @Override    public Fragment getItem(int position) {        return mFragments.get(position);    }    @Override    public int getCount() {        return mFragments.size();    }    @Override    public CharSequence getPageTitle(int position) {        return mTitles.get(position);    }}

TabFragment

public class TabFragment extends Fragment {    private String content;    private View view;    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        view = inflater.inflate(R.layout.item, container,false);        return view;    }    @Override    public void onActivityCreated(@Nullable Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        content = getArguments().getString("content");        TextView tvContent = (TextView) view.findViewById(R.id.tv_tab_content);        tvContent.setText(content + "");    }}

Note:: Why does the tab on the Tabs tab not support horizontal sliding when the content in Tabs exceeds the screen width of the mobile phone? In fact, TabLayout supports horizontal sliding. You only need to add the following line to the Code:

TabLayout. setTabMode (TabLayout. MODE_SCROLLABLE); // you can specify the tab mode.

The length is a little long. For the CoordinatorLayout, CollapsingToolbarLayout, and AppBarLayout, NavigationView will

Learn from the next blog. If you have any questions about the above Code, you are welcome to discuss it together.

Source Code addressHttps://github.com/xujinping/AndroidDesignLibrary/tree/master