Developer headline of Android development of 2 realizes left slide menu

In the last article, we introduced the developer headline of Android development (1) to realize the startup page. Interested friends can refer to it.

title: Take you to the developer headline (2) to realize the left slide menu

tags: Left slide menu, android with sideslip, DrawerLayout

grammar_cjkRuby: true

Today, I started to imitate the sideslip menu of developer headlines, which is the second article in this series. I believe you have seen many app use this sideslip. Today, I will teach you to use android to come with DrawerLayout control.

DrawerLayout is a control that realizes sideslip menu effect in SupportLibrary package. It can be said that DrawerLayout is the product of google after the emergence of the third-party control such as MenuDrawer. DrawerLayout is divided into two parts: side menu and main content area. Side menu can be expanded and hidden according to gestures (DrawerLayout's own characteristics), and the content of main content area can change with the click of menu (this needs to be realized by users themselves).

1. Let's show you the renderings first:

2. Code implementation

1. drawerLayout is actually a layout control, which is a kind of thing with LinearLayout and other controls, but drawerLayout has sliding function. As long as the layout is written according to the layout mode specified in drawerLayout, it can have sideslip effect. I put the contents of the sideslip menu in a layout file here.

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true" >
<include
android:id="@+id/rl_title"
layout="@layout/layout_main_title" />
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/rl_title"
android:background="@color/white_normal" >
</FrameLayout>
</RelativeLayout>
<!-- The navigation view -->
<FrameLayout
android:id="@+id/left_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" >
<!--  Left side menu  -->
<include layout="@layout/layout_main_left" />
</FrameLayout>
</android.support.v4.widget.DrawerLayout> 

Matters needing attention

The layout code of the main content area should be placed in front of the sideslip menu layout, which can help DrawerLayout judge who is the sideslip menu and who is the main content area
The layout of the part of the sideslip menu (in this case ListView) can set the layout_gravity property, which indicates whether the sideslip menu is on the left or right.

2. MainActivity. java inherits FragmentActivity

1). Set content Fragment, set status bar

2). Handle the left click event, set the selected background in the click event, and close the left sideslip menu.

public class MainActivity extends FragmentActivity{
private DrawerLayout mDrawerLayout;
private RelativeLayout rlHome, rlGift, rlShare;
private int currentSelectItem = R.id.rl_home;//  Default home page 
private ContentFragment contentFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
findViewById(R.id.iv_menu).setOnClickListener(clickListener);
initLeftMenu();// Initialize the left menu 
contentFragment=new ContentFragment();
getSupportFragmentManager().beginTransaction().add(R.id.content_frame,contentFragment).commit(); 
setWindowStatus();
}
private void initLeftMenu() {
rlHome = (RelativeLayout) findViewById(R.id.rl_home);
rlGift = (RelativeLayout) findViewById(R.id.rl_gift);
rlShare = (RelativeLayout) findViewById(R.id.rl_share);
rlHome.setOnClickListener(onLeftMenuClickListener);
rlGift.setOnClickListener(onLeftMenuClickListener);
rlShare.setOnClickListener(onLeftMenuClickListener);
rlHome.setSelected(true);
}
private OnClickListener onLeftMenuClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
if (currentSelectItem != v.getId()) {// Prevent repeated clicks 
currentSelectItem=v.getId();
noItemSelect();
switch (v.getId()) {
case R.id.rl_home:
rlHome.setSelected(true);
contentFragment.setContent(" This is the home page ");
break;
case R.id.rl_gift:
rlGift.setSelected(true);
contentFragment.setContent(" This is a gift exchange ");
break;
case R.id.rl_share:
rlShare.setSelected(true);
contentFragment.setContent(" This is my sharing ");
break;
}
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
}
};
private void noItemSelect(){
rlHome.setSelected(false);
rlGift.setSelected(false);
rlShare.setSelected(false);
}
private OnClickListener clickListener = new OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_menu://  Open the left drawer 
mDrawerLayout.openDrawer(Gravity.LEFT);
break;
}
}
};
//  Set the status bar 
private void setWindowStatus() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//  Transparent status bar 
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//  Transparent navigation bar 
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
//  Set the status bar color 
getWindow().setBackgroundDrawableResource(R.color.main_color);
}
}
}

3. Select the background layout file selector_left_menu_item. xml from the left menu item.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/menu_left_item_select" android:state_selected="true"/>
<item android:drawable="@color/white_normal"/>
</selector> 

4. ContentFragment Display Content Fragment Here I added a method to set the content, which is used to click on the left side to switch the display.

public class ContentFragment extends Fragment{
private TextView tvContent;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
View rootView=LayoutInflater.from(getActivity()).inflate(R.layout.fragment_content, null);
tvContent=(TextView) rootView.findViewById(R.id.tv_content);
return rootView;
}
public void setContent(String content){
tvContent.setText(content);
}
}

5. What is the relationship between drawerLayout and Fragment?

We see a lot of code that uses drawerLayout using Fragment at the same time, This will lead to misunderstanding, It is thought that Fragment must be used to use drawerLayout. In fact, this is wrong. Fragment is used because when the sideslip menu is clicked, if the content in the main content area is complex, it will be easier to fill it with Fragment. If your main content area is only a simple string and you only want to update the content of the string under 1 when different menus are clicked, I don't think it is necessary to use Fragment. What I do here with Fragment is as simple as updating the string content.

The above content is aimed at Android Developer Headline (2) to achieve the full introduction of the left slide menu, hoping to help everyone!