Android development Travel Notes: introduction to and usage of new controls in meterial design 5.0

Android development Travel Notes: introduction to and usage of new controls in meterial design 5.0

Android 5.0 Lollipop is the most significant release so far. Because of the existence of material design, the android interface style has changed. This is a new design language, it refreshes the user experience of the entire Android system. It is a great challenge for developers to design applications that fully comply with the material design philosophy.
The Android Design Support Library provides excellent Support for this. It integrates many important material design controls to Support all Android 2.1 and later versions. You can see the navigation drawer view, floating labels, floating action button, snackbar, tabs, and a set of action and scroll frames that closely combine them.

Here is an official demo.
The effect is as follows:

Download link:
Download the eclipse demo
Download the android studio demo

The following describes the relevant code and some new controls in Section 5.0. NavigationView

The first is the slide navigation bar. Although the slide bar already exists in earlier versions, it is more convenient to use after 5.0, and the special effect NavigationView is provided as the standard of the navigation bar.
Usage:

First, use DrawerLayout as the root layout in the layout file:
Add NavigationView in DrawerLayout

The layout_gravity attribute controls whether the navigation bar slides out from the left or right.
The headerLayout attribute requires a layout of the Composition navigation header (header ).
The menu attribute requires a menu configuration file.

Add drawer_view.xml In the res/menu folder.

In this way, the navigation menu configuration is completed, and the running result is displayed.

If the menu length is too long, NavigationView can be rolled and has a scroll bar by default. Although NavigationView has the method of removing the scroll bar, it does not have to be used in a variety of methods, so the source code is not the scroll bar generated by NavigationView scrolling, the NavigationView encapsulates a scrollable View, which is probably a bug. You can use the following method to cancel the scroll bar:

    NavigationView navi = (NavigationView) findViewById(R.id.navi);    navi.getChildAt(0).setVerticalScrollBarEnabled(false);

Toolbar

Toolbar is a standard used to remove the previously used actionbar. It solves the disadvantage that actionbar cannot be freely controlled and can be highly customized as needed. Its usage is also simple:

Usage:

First, add a toolbar to the layout.

Next, you can associate it with activity in the java code:

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.setTitle(getString(R.string.app_name));        setSupportActionBar(toolbar);

To implement the onCreateOptionsMenu method in the activity, you can also expand a drop-down menu on the right of the toolbar:

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

In combination, add ActionBarDrawerToggle as the DrawerListener of DrawerLayout. The menu button in the upper left corner will have a conversion animation by default:

    ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this,      mDrawerLayout, toolbar, R.string.open, R.string.close);    mActionBarDrawerToggle.syncState();    mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

TabLayout

TabLayout is a page control that is used with viewPager. It is also a very common function. It has not been officially implemented in the previous android version, therefore, many third-party open-source controls, such as PagerSlidingTabStrip, have emerged. Now the official implementation is naturally better:

Usage:

Add tablayout to the layout:

Then associate the corresponding viewPager in the java code:

        ViewPager pager = (ViewPager) findViewById(R.id.pager);        pager.setAdapter(pagerAdapter);        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);        tabLayout.setupWithViewPager(pager);

FloatingActionButton

It inherits from ImagButton and is similar to button in usage. You can use the app: layout_anchorGravity attribute to set its floating position. You can use the app: layout_anchor attribute to set the View on which the image is floating:

Snackbar

Similar to Toast, it is a new message reminder mechanism that pops up at the bottom. Compared with Toast, you can set a click event. How can users not click it? It will disappear after a few seconds.

Usage:

    public void onClick(View view) {        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)            .setAction("Action", null).show();    }

In setAction, the first parameter is the text of the button, and the second parameter can be used to set a click listener.

CardView

CardView provides a card (paper ?) A layout style that allows you to customize the degree of rounded corner and shadow area. A simple control is very convenient to use and inherits from FrameLayout. The usage is similar:

Attribute explanation:
Card_view: cardElevation shadow size
Card_view: Maximum shadow height of cardMaxElevation
Card_view: background color of the cardBackgroundColor card
Card_view: the rounded corner size of the cardCornerRadius card
Card_view: the padding interval of the contentPadding card content

RecyclerView

RecyclerView is the one with the highest weight among the 5.0 new controls and is currently the most discussed. Compared with the traditional listView, RecyclerView solves many effects that cannot be achieved in the traditional way, the most direct method is to integrate the layout of lists, grids, and waterfall streams into a single control, which is managed by the layout manager in a unified manner. It also allows developers to customize the layout manager to customize the layout mode, providing developers with a highly customizable layout component.

Usage:

Add in Layout

Set layout manager and adapter in activity or fragment:

RecyclerView recyclerView = (RecyclerView) this. rootView. findViewById (R. id. recyclerView); // layout recyclerView. setLayoutManager (new LinearLayoutManager (recyclerView. getContext (), LinearLayoutManager. VERTICAL, false); // grid layout // recyclerView. setLayoutManager (new GridLayoutManager (recyclerView. getContext (), 2, // GridLayoutManager. VERTICAL, false); // waterfall stream layout // recyclerView. setLayoutManager (new StaggeredGridLayoutManager (2, // StaggeredGridLayoutManager. VERTICAL); // sets the adapter List
  
   
Results = new ArrayList
   
    
(); Adapter = new MyRecyclerViewAdapter (getActivity (), R. layout. item_main, results); recyclerView. setAdapter (adapter );
   
  

Here, Cheese is an object and you can add it yourself. You can use setLayoutManager to set the layout manager in different layoutmanager modes. Three layoutmanager modes are provided here. To modify the layout mode, you only need to set different layout managers.

The code for MyRecyclerViewAdapter is as follows:

public class MyRecyclerViewAdapter extends RecyclerView.Adapter
  
   {    private Context context;    private int srcId;    private List
   
     results;    //get & set    public List
    
      getResults() {        return results;    }    public MyRecyclerViewAdapter(Context context,int srcId,List
     
       results){        this.context = context;        this.results = results;        this.srcId = srcId;    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext()).inflate(srcId, parent, false);        return new MyViewHolder(view);    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {        holder.img_header.setImageResource(R.drawable.cheese_1);        holder.text_title.setText(results.get(position).getTitle());    }    @Override    public int getItemCount() {        return results.size();    }    public class MyViewHolder extends RecyclerView.ViewHolder{        public ImageView img_header;        public TextView text_title;        public MyViewHolder(View itemView) {            super(itemView);            img_header = (ImageView) itemView.findViewById(R.id.img_header);            text_title = (TextView) itemView.findViewById(R.id.text_title);        }    }}
     
    
   
  

Code explanation

Because RecycleView encapsulates the Holder structure and does not need to process item reuse as if using ListView, MyViewHolder is built in to save the item control view object for reuse.
MyRecyclerViewAdapter inherits from RecyclerView. Adapter and implements onCreateViewHolder, onBindViewHolder, and getItemCount methods.

GetItemCount () returns the number of items. You don't need to talk about it more.

    @Override    public int getItemCount() {        return results.size();    }

OnCreateViewHolder () is called when you create the item view. Here, you need to create a view, instantiate the Holder, and return to save the view object.

    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext()).inflate(srcId, parent, false);        return new MyViewHolder(view);    }

OnBindViewHolder () is called when binding data. It passes the previously created Holder object to you. Some developers bind the data, but the passed Holder is not necessarily created in the previous step, it may be recycled and reused Holder. This process is invisible to developers and does not need to worry about where the Holder comes from, you only need to bind the corresponding data to different Holder, which is a more convenient way to process RecycleView than ListView.

    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {        holder.img_header.setImageResource(R.drawable.cheese_1);        holder.text_title.setText(results.get(position).getTitle());    }

Such a basic RecycleView is complete. You only need to use different layout managers to change the layout method, which is quite convenient.

This is just a basic use of RecycleView. RecycleView also has many features, such as separation lines, dynamic addition and deletion of items, admission and exit animations, sticky item headers, nesting, and complex mixed layout, leave it for later and write it in another article.

If it is useful, click the button below.