Android ASD components (1) and androidasd Components

Source: Internet
Author: User

Android ASD components (1) and androidasd Components

Google released the new Design standard Material Design after android5.0. In order to use Material Design in earlier versions, google released the Android Support Design Support library.

Next, let's take a look at the usage of some components provided in this library.

SnackBar This component is a prompt information component between Toast and Dialog. Its usage is similar to that of Toast. Common SnackBar methods are as follows:

1,Public staticSnackbar make (@ NonNull View view, @ StringResIntResId, @ DurationIntDuration): static method, using string resources to build an SnackBar object
2,Public staticSnackbar make (@ NonNull View view, @ NonNull CharSequence text,
@ DurationIntDuration): static method, used to build an SnackBar object.
3,PublicSnackbar setAction (@ StringResIntResId, View. OnClickListener listener): sets the action of the SnackBar.
4,PublicSnackbar setAction (CharSequence text,FinalView. OnClickListener listener): sets the SnackBar action.
5,PublicSnackbar setActionTextColor (ColorStateList colors): sets the operation text color.
6,Public voidShow (): displays the SnackBar.
The specific use case code is as follows:
Snackbar. make (v, "don't mess up !!!! ", Snackbar. LENGTH_LONG). setAction (" OK ", new View. OnClickListener () {@ Override public void onClick (View v) {show. setText (" what have you clicked? ") ;}}). Show ();

The FloatingActionButton component is a common circular button in a project that inherits from ImageView. It provides some attributes for setting styles, as shown below:

1,App: borderWidth: Border Width

2,App: backgroundTint: background color of FloatingActionButton

3,App: rippleColor: FloatingActionButton color when clicked

4,App: fabSize: FloatingActionButton size

5,App: elevation: FloatingActionButton height

The CoordinatorLayout component is a layout component that implements the rolling animation effect in the Material Design. The main function is to act as a layout container, but to coordinate the child View to implement the rolling animation effect.

Use the above three components to complete the case, as shown in:


The specific layout file is as follows:

<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">    <TextView        android:id="@+id/show"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:textSize="16sp" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/btnFloating"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="end|bottom"        android:layout_margin="20dp"        android:src="@mipmap/ic_launcher"        app:backgroundTint="#ff0000"        app:borderWidth="5dp"        app:elevation="10dp"        app:fabSize="normal"        app:pressedTranslationZ="5dp"        app:rippleColor="#00ff00" /></android.support.design.widget.CoordinatorLayout>

TabLayout is a tab container. With TabLayout, We can conveniently implement the classic interface structure of Tabs + ViewPager + Fragment. TabLayout inherits the HorizontalScrollView and has all the features of ScollView. Use the following attributes to customize the display style of a Tab:

1,App: TabIndicatorColor: Indicator color
2,App: TabIndicatorHeight: Indicator height
3,App: TabSelectedTextColor: Text color of the Selected Tab
4,App: TabMode: Tab Mode
5,App: TabTextAppearance: Tab Font Style
The specific results of TabLayout are as follows:

Note the following two points in this case:

1. The ViewPager adapter must implement the getPageTitle method. The text in the Tab in TabLayout is obtained from this method.
2. Set the adapter for ViewPager first, and then call the TabLayout method in sequence.
  a)  setTabsFromPagerAdapter
  b)  setupWithViewPager
The Code is as follows:
Public class TabsActivity extends AppCompatActivity {private Toolbar toolbar; private TabLayout tabs; private ViewPager viewPager; private List <View> pagerData; String [] titles = new String [] {"recommended ", "Hotspot", "Yantai", "Society", "video"}; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. tabs_layout); toolbar = (Toolbar) findViewById (R. id. toolbar); setsuppactionactionbar (toolbar); ActionBar actionBar = getSupportActionBar (); actionBar. setTitle ("Jerry Education"); actionBar. setDisplayHomeAsUpEnabled (true); tabs = (TabLayout) findViewById (R. id. tabs); viewPager = (ViewPager) findViewById (R. id. viewPager); initPagerData (); MyPageAdapter adapter = new MyPageAdapter (); viewPager. setAdapter (adapter); tabs. setTabsFromPagerAdapter (viewPager. getAdapter (); tabs. setupWithViewPager (viewPager);} private void initPagerData () {pagerData = new ArrayList <> (); for (int I = 0; I <titles. length; I ++) {TextView textView = new TextView (this); textView. setText (titles [I]); pagerData. add (textView) ;}} private class MyPageAdapter extends PagerAdapter {@ Override public int getCount () {return pagerData. size () ;}@ Override public boolean isViewFromObject (View view, Object object) {return view = object ;}@ Override public Object instantiateItem (ViewGroup container, int position) {View view = pagerData. get (position); container. addView (view); return view;} @ Override public void destroyItem (ViewGroup container, int position, Object object Object) {container. removeView (pagerData. get (position) ;}@ Override public CharSequence getPageTitle (int position) {return titles [position] ;}}

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
Copyright Disclaimer: The copyright of this article is shared by Yantai jereh Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the consent of the author and provide the original article connection clearly on the article page, otherwise, you are entitled to pursue legal liability.
Technical Consultation:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.