DrawerLayoutの簡単な使い方（公式サイドスライドメニュー）
このセクションの紹介:
このセクションでは、基本的な UI コントロール部分の最後のコントロール: DrawerLayout、公式によって提供される横スライド メニューについて説明します。 前のセクションの ViewPager と同様に、このコントロールは 3.0 以降に導入されました。それより前のバージョンで使用するには、サイド スライドに関しては v4 互換性パッケージが必要だと思います。 github で SlidingMenu を使用している人は多いと思いますが、独立したバージョンと依存したバージョンの 2 つのバージョンがあるようです。 オープンソース プロジェクト: ActionBarSherlock。Google がこのコントロールを提供しているので、それを使用しないのはなぜでしょうか。 マテリアル デザインの設計仕様では、随所に見られる横スライド メニューのアニメーション効果のほとんどは、ツールバー + によって実現できます。 ~ を実現するための DrawerLayout です。このセクションでは、この DrawerLayout の基本的な使用法を検討します ~ これを使用することを好む人もいます ドロワーコントロールと呼ばれます〜公式ドキュメント: DrawerLayout
1. 使用上の注意
- 1 メインコンテンツビューはDrawerLayout
- 2の最初のサブビューである必要があります。高さは match_parent
- 3 である必要があります。指定された横スライド ビューの android:layout_gravity 属性が表示される必要があります android:layout_gravity = "start" の場合、メニューは左から右にスライドします。 android:layout_gravity = "end"の場合、メニューを右から左にスライドアウトします 左右の使用はお勧めしません!!!
サイドスライドビューの幅は dp 単位であり、- 320dp を超えることはお勧めできません (一部のメインコンテンツビューを常に表示するため)
Set横スライド イベント: mDrawerLayout.setDrawerListener(DrawerLayout .DrawerListener); 1 つ言えること: ユーザーがアクションバー上のアプリケーション アイコンをクリックすると、横スライド メニューがポップアップします。 ！ ここでは、DrawerLayout.DrawerListener の特定の実装クラスである- ActionBarDrawerToggle を渡す必要があります。 ActionBarDrawerToggle の onDrawerOpened() と onDrawerClosed() をオーバーライドして、引き出しの引き出しをリッスンできます。 またはイベントを非表示にします。ただし、5.0 以降ではツールバーを使用するため、ここでは説明しません。興味のある方はご自身で関連情報をご確認ください 書類！
2. コード例の使用
例 1: 片面スライドメニューの実装
レンダリングの実行:
:最初は私たちのメインレイアウト、注: 最も外側のレイヤーは DrawerLayout である必要があります。 ！ ！ ！
activity_main.xml: 次のListViewの布局代およびドメイン类：アイテム比较简单、就不给出了、直接上中间フラグメントの
布局および代码吧！外部アダプター直接使用我们之前写的那个使用可能MyAdapter！ ; android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > ContentFragment.java： 最後にアクティビティクラス MainActivity.java: レンダリングの実行: コード実装: 左フラグメント: fg_left.xml、ここでは画像が使用されており、クリックすると新しいアクティビティがポップアップ表示されます。
もちろんニーズに合わせて拡張も可能です！ 对应的LeftFragment.java： フラグメント: レイアウトは 3 つのボタンだけです。クリックした後、レイアウト コードは次のとおりです: その場合、対応するものは RightFragment.java: <RelativeLayout xmlns:android="http:///schemas.android.com/apk/res/android" android:layout_width="match_parent " android:layout_height="match_parent" ContentFragment.java： <?xml version="1.0"coding="utf-8"?><RelativeLayout xmlns :android= "http://schemas.android.com/apk/res/android" android:layout_width="match_parent" 次に、activity_main.xml: 最後にMainActivity.java: さて、これで完了です~、おっと、コードを見て疑問に思うことについて話しましょう:
android:id="@+id/drawer_layout"
android:layout_width ="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent" /> ;
<ListView
android:id="@+id/list_left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="../ style/images/android-tutorial-drawerlayout.html"
android:choiceMode="singleChoice"
android:divider="#FFFFFF"
android:dividerHeight="1dp" />
</android.support.v4 .widget.DrawerLayout>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp " />
</RelativeLayout>
* 2015/10/8 0008 に Jay によって作成されました。
*/
public class ContentFragment extends Fragment {
private TextView tv_content;
@Override
public View onCreateView(LayoutIn) flater 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;
}
}
private DrawerLayout drawer_layout;
private ListView list_left_drawer;
private ArrayList<Item> menuLists;
private MyAdapter<Item> myAdapter = null;
@Override
protected 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<Item>();
menuLists.add(new Item(R.mipmap.iv_menu_realtime ,"实時刻情報"));
menuLists.add(new Item(R.mipmap.iv_menu_alert,"提醒通知"));
menuLists.add(new Item(R.mipmap.iv_menu_trace,"活动路線"));
menuLists.add(new Item( R.mipmap.iv_menu_settings,"相关设置"));
myAdapter = new MyAdapter<Item>(menuLists,R.layout.item_list) {
@Override
public void bindView(View Holder holder, Item obj) {
holder.setImageResource (R.id.img_icon,obj.getIconId());
holder.setText(R.id.txt_content, obj.getIconName());
}
list_left_drawer.setAd apter(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 (正) .geticonName ());
ContentFragment.Setarguments (ARGS);
FragmentManager FM = GetSupportfragmentManager ();
DRAWER_LAYOUT .closeDrawer(list_left_drawer);
}
}
例 2. 左右 2 つのスライド メニューの実装まあ、持っているかどうかはわかりませんが、上記の DrawerLayout のレイアウトはおそらく推測できるので、DrawerLayout から気づきました。
中央のコンテンツ部分、左側の横スライド メニュー部分、右側の横スライド メニュー部分の最大 3 つの部分で構成されます。
2 つの横スライド メニューを使用した例を書いてみましょう。
android: orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img_bg"
android:layout_width="match_parent"
android: layout_height="match_parent"
android:background="../style/images/bg_menu_left"/>
</LinearLayout>
* 2015/10/9 0009 に Jay によって作成されました。
*/
public class LeftFragment extends Fragment{
private DrawerLayout drawer_layout;
@Override
public View onCreateView(LayoutInflater インフレータ、 ViewGroup コンテナ、 Bundle savedInstanceState ) {
View view = inflater.inflate(R.layout.fg_left, container, false);
ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg);
setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
getActivity().startActivity(new Intent(getActivity(),OtherActivity.class));
drawer_lay out.closeDrawer(Gravity.START);
}
});
return view;
}
//DrawerLayoutの入力に使用されるアクティビティを公開するため、点击後の想关掉DrawerLayout
public void setDrawerLayout(DrawerLayout drawer_layout){
this.drawer_layout = drawer _layout;
}
}
android:layout_height= "match_parent"
android:background= "../style/images/android-tutorial-drawerlayout.html"
android:gravity="center"
android:orientation="vertical">
<ボタン
android: id="@+id/btn_one "
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="メニュー項目 1"/& lt; : ID = "@+ID/btn_two"
Android：layout_width = "wrap_content"：layout_width = "wrap_content"
* 2015/10/9 0009 に Jay によって作成されました。
*/
public class RightFragment extends Fragment implements View.OnClickListener{
private DrawerLayout drawer_layout;
private FragmentManager fManager;
@Override
public View onCreateView(LayoutInflater インフレータ、 ViewGroup コンテナ、 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).setOnClickリスナー(this);
view.findViewById(R.id.btn_three).setOnClickListener(this);
fManager = getActivity().getSupportFragmentManager();
return view;
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_one:
ContentFragment cFragment1 = new ContentFragment("1.点击了右侧菜单项一",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.点击了右侧菜单项二",R.color.red);
fManager.beginTransaction().replace(R.id.fly_content,cFragment2).commit();
drawer_layout.closeDrawer(Gravity.END);
休憩;
ケース R.id.btn_three:
ContentFragment CFRAGMENT3 = New ContentFragment (「3. 右側のメニュー項目 3 をクリックします」、R.Color. yellow); id.fly_content, cfragment3); .commit();
drawer_layout.closeDrawer(Gravity) .END);
block;drawer_layout){
This.drawer_layout =drawer_layout;
}
}
さらに、中央にある ContentFragment のレイアウト:
fg_content.xml
android:id=" @+id/tv_content"
android:layout_width="wrap_content"
android:layout_height=" Wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp" />
</RelativeLayout>
private TextView tv_content;
private String strContent;
private int bgColor;
public ContentFragment(String strContent,int bgColor) {
This.strContent = strContent ; S this.bgcolor = bgcolor;
}@v@v Public View OncreateView (Layoutinflator Inflator, ViewGroup Container, Bundle SavedanceState) {
View v iEW = Inflator.inflate (R.Layout.fg_Content, Container, FALSE); .setBackgroundColor(getResources().getColor(bgColor));
tv_content = (TextView) view.findViewById(R.id.tv_content);
tv_content.setText(strContent);
return view;
}
}
書かれたその後、アクティビティのレイアウトとアクティビティのコードに進みます。
その前に、トップバーのレイアウトも必要です:
<ボタン
android:id="@+id/btn_right "
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android: layout_alignparentright = "true"
have
xmlns:tools="http://schemas.android.com/ tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height= "match_parent"
android:orientation="vertical">
<include
android:id="@+id/topbar"
layout="@layout/view_topbar"
android:layout_width="wrap_content"
android: layout_height="48dp" />
<FrameLayout
android:id="@+id/fly_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout> ;
<fragment
android:id="@+id/fg_left_menu"
android:name="jay.com.drawerlayoutdemo2.LeftFragment"
android:layout_width="300dp"
android: layout_height="match_parent"
android :layout_gravity="start"
android:tag="LEFT"
tools:layout="@layout/fg_left" />
<fragment
android:id="@+id/fg_right_menu"
アンドロイド:名前= "jay.com.drawerlayoutdemo2.RightFragment"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:tag="RIGHT"
tools:layout="@layout/fg_right" />
</android.support.v4.widget。引き出しレイアウト>
private DrawerLayout drawer_layout;
private FrameLayout fly_content;
private View topbar;
private Button btn_right;
private RightFragment fg_right_menu;
private LeftFragment fg_left_menu;
private FragmentManager fManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager = getSupportFragmentManager() ;
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 );
//設置右側の側滑菜单只能通编程を通じて打开
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) {
setDrawerLockMode(
DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.END);
}
@Override
公開void onDrawerStateChanged(int i) {
}
});
fg_right_menu.setDrawerLayout(drawer_layout);
fg_left_menu.setDrawerLayout(drawer_layout) ;
}
@Override
public void onClick(View v) {
drawer_layout.openDrawer (Gravity.RIGHT);
drawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
Gravity.END); //锁定解除
}
}
3. コードサンプルのダウンロードDrawerLayoutDemo.zipDrawerLayoutDemo2.zip
このセクションの概要:このセクションでは、公式の横スライド コントロール DrawerLayout の基本的な使用法を紹介します。使用すると立ち上がるのにとても便利です！
もちろん、これは単なる使用方法のデモです。さらに、Zhang Yang 氏が「Android DrawerLayout の高模倣 QQ5.2 双方向スライド メニュー」という記事を書いています。興味があればご覧ください。このセクションの内容を読んだあなたには、それがどれほど難しいか理解できないと思います。 このセクションはここまでです。UI コントロールの章に別れを告げましょう~次の章では描画とアニメーションを開始します。
高度なカスタム コントロール シリーズの基礎を築きます。
