Android basic getting started -- 2.4.15 simple use of DrawerLayout (Official slide menu)

Source: Internet
Author: User

Android basic getting started -- 2.4.15 simple use of DrawerLayout (Official slide menu)
This section introduces:

This section introduces the last widget of the basic UI control:DrawerLayout, A slide menu officially provided for us
Control, just like ViewPager in the previous section, introduced later than 3.0. To use it in earlier versions, v4 compatibility is required. When talking about slide, I believe
Many people have used SlidingMenu on github, but it seems that there are two versions. One is independent, and the other needs to depend on the other.
Open-source project: ActionBarSherlock; Since Google provides us with this control, why not?
In the Design specifications of Material, the animation effects of many slide menus can be seen everywhere.
Implementation of DrawerLayout ~, This section describes a basic usage of DrawerLayout ~ Some people like to take him
Called drawer controls ~ Official Document: DrawerLayout

1. Precautions for use
1The main content view must be the first subview of DrawerLayout. 2. The width and height of the main content view must be match_parent. 3. Android with the specified slide view must be displayed: Layout_gravity attribute
Android: layout_gravity = "start", slide the menu from left to right
Android: layout_gravity = "end", slide the menu from right to left
Left and right are not recommended !!! The width of the slide view is in the unit of dp. It is not recommended to exceed 320dp(In order to always see some of the main content views) set a slide event: mDrawerLayout. setDrawerListener (DrawerLayout. drawerListener); one point: you can use the Actionbar function to bring up a slide menu when you click the application icon on the Actionbar!
Here we will use ActionBarDrawerToggleIt is the implementation class of DrawerLayout. DrawerListener,
We can rewrite ActionBarDrawerToggle's onDrawerOpened () and onDrawerClosed () to listen for drawer pulling
Or hide events! But we will not talk about it here, because after 5.0, we use the Toolbar! If you are interested, you can check the related information on your own.
Document!
2. Sample Code Example 1: Implementation of a single slide menu

Run:

Key code implementation:

The first is our main layout. Note: The outermost layer is DrawerLayout !!!!

Activity_main.xml:

    <framelayout android:id="@+id/ly_content" android:layout_height="match_parent" android:layout_width="match_parent">    
  </framelayout>

Then, the layout code of ListView and the domain class: Item is relatively simple and will not be given.
Layout and code! In addition, the Adapter directly reuses the reusable MyAdapter we previously wrote!

Fg_content.xml:


  
      
   
  

ContentFragment. java:

/** * Created by Jay on 2015/10/8 0008. */public class ContentFragment extends Fragment {    private TextView tv_content;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content, container, false);        tv_content = (TextView) view.findViewById(R.id.tv_content);        String text = getArguments().getString(text);        tv_content.setText(text);        return view;    }}    

Finally, our Activity class

MainActivity. java:

Public class MainActivity extends AppCompatActivity implements AdapterView. OnItemClickListener {private DrawerLayout drawer_layout; private ListView list_left_drawer; private ArrayList
  
   
MenuLists; private MyAdapter
   
    
MyAdapter = null; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); drawer_layout = (DrawerLayout) findViewById (R. id. drawer_layout); list_left_drawer = (ListView) findViewById (R. id. list_left_drawer); menuLists = new ArrayList
    
     
(); MenuLists. add (new Item (R. mipmap. iv_menu_realtime, real-time information); menuLists. add (new Item (R. mipmap. iv_menu_alert, notification); menuLists. add (new Item (R. mipmap. iv_menu_trace, activity route); menuLists. add (new Item (R. mipmap. iv_menu_settings, related settings); myAdapter = new MyAdapter
     
      
(MenuLists, R. layout. item_list) {@ Override public void bindView (ViewHolder holder, Item obj) {holder. setImageResource (R. id. img_icon, obj. getIconId (); holder.setText(R.id.txt _ content, obj. getIconName () ;}}; list_left_drawer.setAdapter (myAdapter); list_left_drawer.setOnItemClickListener (this) ;}@ Override public void onItemClick (AdapterView
      Parent, View view, int position, long id) {ContentFragment contentFragment = new ContentFragment (); Bundle args = new Bundle (); args. putString (text, menuLists. get (position ). getIconName (); contentFragment. setArguments (args); FragmentManager fm = getSupportFragmentManager (); fm. beginTransaction (). replace (R. id. ly_content, contentFragment ). commit (); drawer_layout.closeDrawer (list_left_drawer );}}
     
    
   
  

The code is very simple. I will not talk about it much ~

Example 2. Implementation of two slide menus

Well, I don't know if you have found out. From the layout of DrawerLayout above, we can probably guess that DrawerLayout
It consists of up to three parts: the content in the middle, the slide menu on the left, and the slide menu on the right!
Here is an example with two slide menus!

Run:

Code Implementation:

---- First, we create two Fragment and the corresponding layout. They are the left and right slide menus!

Fragment on the left:

Layout:Fg_left.xmlHere, we use an image and click it to bring up a new Activity;
Of course, you can expand as needed!


  
      
   
  

CorrespondingLeftFragment. java:

/*** Created by Jay on 0009. */public class LeftFragment extends Fragment {private DrawerLayout drawer_layout; @ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View = inflater. inflate (R. layout. fg_left, container, false); ImageView img_bg = (ImageView) view. findViewById (R. id. img_bg); img_bg.setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {getActivity (). startActivity (new Intent (getActivity (), OtherActivity. class); drawer_layout.closeDrawer (Gravity. START) ;}}); return view;} // exposes it to the Activity and is used to input DrawerLayout, because you want to disable DrawerLayout public void setDrawerLayout (DrawerLayout drawer_layout) {this. drawer_layout = drawer_layout ;}}

Fragment on the right:

The layout has three buttons. click the button to replace the Fragment in the middle of the layout.Fg_right.xmlThe Code is as follows:


  
  
   
   
  

Then it correspondsRightFragment. java:

/*** Created by Jay on 0009. */public class RightFragment extends Fragment implements View. onClickListener {private DrawerLayout drawer_layout; private FragmentManager fManager; @ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater. inflate (R. layout. fg_right, container, false); view. findViewById (R. id. btn_one ). setOnClickListener (this); view. findViewById (R. id. btn_two ). setOnClickListener (this); view. findViewById (R. id. btn_three ). setOnClickListener (this); fManager = getActivity (). getsuppfrfragmentmanager (); return view;} @ Override public void onClick (View v) {switch (v. getId () {case R. id. btn_one: ContentFragment cFragment1 = new ContentFragment (1. click item 1 on the right, R. color. blue); fManager. beginTransaction (). replace (R. id. fly_content, cFragment1 ). commit (); drawer_layout.closeDrawer (Gravity. END); break; case R. id. btn_two: ContentFragment cFragment2 = new ContentFragment (2. click item 2 in the menu on the right. color. red); fManager. beginTransaction (). replace (R. id. fly_content, cFragment2 ). commit (); drawer_layout.closeDrawer (Gravity. END); break; case R. id. btn_three: ContentFragment cFragment3 = new ContentFragment (3. click item 3 on the right. color. yellow); fManager. beginTransaction (). replace (R. id. fly_content, cFragment3 ). commit (); drawer_layout.closeDrawer (Gravity. END); break ;}} public void setDrawerLayout (DrawerLayout drawer_layout) {this. drawer_layout = drawer_layout ;}}

There is also a ContentFragment filled in the middle part, layout:Fg_content.xmlAs follows:


  
      
   
  

ContentFragment. java:

public class ContentFragment extends Fragment {    private TextView tv_content;    private String strContent;    private int bgColor;    public ContentFragment(String strContent,int bgColor) {        this.strContent = strContent;        this.bgColor = bgColor;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fg_content, container, false);        view.setBackgroundColor(getResources().getColor(bgColor));        tv_content = (TextView) view.findViewById(R.id.tv_content);        tv_content.setText(strContent);        return view;    }}

---- After compilation, we will see the layout of our Activity and the code of the Activity:
Before that, we need some la s on the top bar:

View_topbar.xml:


  
      
  

ThenActivity_main.xml:

    
          
   
            <framelayout android:id="@+id/fly_content" android:layout_height="match_parent" android:layout_width="match_parent">    </framelayout>
   
      
      
   
    

FinallyMainActivity. java:

Public class MainActivity extends AppCompatActivity implements View. onClickListener {private DrawerLayout listener; private response fly_content; private View topbar; private Button btn_right; private RightFragment listener; private response listener; private FragmentManager fManager; @ Override protected void onCreate (Bundle listener) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); fManager = getsuppfrfragmentmanager (); fg_right_menu = (RightFragment) fManager. findFragmentById (R. id. fg_right_menu); fg_left_menu = (LeftFragment) fManager. findFragmentById (R. id. fg_left_menu); initViews ();} private void initViews () {drawer_layout = (DrawerLayout) findViewById (R. id. drawer_layout); fly_content = (FrameLayout) findViewById (R. id. fly_content); topbar = findViewById (R. id. topbar); btn_right = (Button) topbar. findViewById (R. id. btn_right); btn_right.setOnClickListener (this); // set the slide menu on the right to open drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_LOCKED_CLOSED, Gravity. END); drawer_layout.setDrawerListener (new DrawerLayout. drawerListener () {@ Override public void onDrawerSlide (View view, float v) {}@ Override public void onDrawerOpened (View view) {}@ Override public void onDrawerClosed (View view) {drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_LOCKED_CLOSED, Gravity. END) ;}@ Override public void onDrawerStateChanged (int I) {}}); fg_right_menu.setDrawerLayout (drawer_layout); Aggregate (drawer_layout);} @ Override public void onClick) {drawer_layout.openDrawer (Gravity. RIGHT); drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_UNLOCKED, Gravity. END); // unlock }}

Okay. Now we're done ~, Call, the following may be confused when you look at the Code:

1. Drawer_layout. OpenDrawer(Gravity. END );
Set which menu to open. START indicates the left and END indicates the right. 2. Drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_LOCKED_CLOSED, Gravity. END );
Click the slide menu on the right. You cannot close or open the menu by means of gestures. You can only open the menu by code! Call the openDrawer method!
Next, drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_UNLOCKED, Gravity. END );
Unlock status, that is, you can close the slide menu through gestures
Call the following when drawer is disabled:
Drawer_layout.setDrawerLockMode (DrawerLayout. LOCK_MODE_LOCKED_CLOSED, Gravity. END );
Lock the slide menu on the right again! 3. What is the role of the Tag attribute in the layout code?
A: It is useless here. When rewriting the onDrawerSlide method of DrawerListener, we can use its first
The drawerView parameter. Call drawerView. getTag (). equals ("START") to determine which menu event is triggered.
Menu! Then you can perform corresponding operations!
 

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.