Android Drawer(抽屉,即侧拉栏)的简单使用:
来源:互联网 发布:qq飞车蓝魔尊数据 编辑:程序博客网 时间:2024/06/06 01:11
API官网连接:https://developer.android.com/training/implementing-navigation/nav-drawer.html#ListItemClicks
现在的apps开发中,侧拉栏已经成为很多设计师的钟爱的一个模块,市面上一抓一大把的 app都有使用到侧拉栏如 QQ等。
其实实现侧拉栏的方式有很多种,今天说的是Android官方API给出的比较方便使用的一中,使用到的控件就是今天的猪脚:DrawerLayout
DrawerLayout有 v7包版本和 v4包版本,下面使用到的是 v4版本:
为了更好的了解和使用控件,我们先来了解一下,到底 DrawerLayout是何方神圣??
Drawer的翻译为“抽屉”即是可以拉出来的柜子,用这个来形容这个控件就真的再合适不过了,
官方的描述为:使用DrawerLayout来构造一个大多数时间下都是隐藏在屏幕的左边缘,app的主要导航选项模块。
其实说白了就是一个侧拉栏。
一 布局部分:
新建一个 布局的.xml文件
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.oufenghua.blog.activity.MainActivity"> <!-- The main content view --> <FrameLayout android:id="@+id/content_view" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--标题栏开始--> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/colorPrimary"> <ImageView android:id="@+id/drawer_img" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="15dp" android:src="@mipmap/drawer" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="BLOG" android:textColor="#FFFFFF" android:textSize="25dp" /> </RelativeLayout> <!--标题栏结束--> <!--内容开始--> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="9"> </LinearLayout> <!--内容结束--> </LinearLayout> </FrameLayout> <!-- The navigation drawer --> <LinearLayout android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="start" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/colorPrimary" /> <ListView android:id="@+id/left_drawer" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="4" android:background="#FFFFFF" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" /> </LinearLayout></android.support.v4.widget.DrawerLayout>
注意!DrawerLayout 必须为布局文件的最顶的布局并且 FrameLayout必须放在 DrawerLayout子控件的第一个
侧拉栏那一部份的布局用一个布局包裹着并设置其属性android:layout_gravity="start"
然后在进行排版布局
用图片说明一下它的布局方式:
其实是通过把Drawer的布局设置到了屏幕的左外侧来隐藏,当滑动的时候把整个布局用动画的形式平移到窗体内。(其实可以设置 gravity属性为 end把侧拉栏设置到屏幕右边的)
二代码部分:
由于重点是对Drawer的使用的介绍,所以我侧拉部分的列表就不做多介绍了。
package com.example.oufenghua.blog.activity;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Gravity;import android.view.View;import android.widget.AdapterView;import android.widget.ImageView;import android.widget.ListView;import com.example.oufenghua.blog.R;import com.example.oufenghua.blog.adapter.MyAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {
//抽屉式布局 private DrawerLayout mDrawerLayout;
//导航列 private ListView mDrawList;
//字符集 private List<String> list = new ArrayList<>();
//标题栏图标 private ImageView drawerIcon; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); setit(); } //关联资源 private void init() { mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawList = (ListView) findViewById(R.id.left_drawer); drawerIcon = (ImageView) findViewById(R.id.drawer_img); list.add("首頁"); list.add("博客"); list.add("設置"); list.add("我的"); list.add("關於"); }
//设置 private void setit() {
mDrawList.setAdapter(new MyAdapter(list, MainActivity.this)); drawerIcon.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mDrawerLayout.openDrawer(Gravity.LEFT, true); } }); mDrawList.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { } }); }}
代码的话主要是关联一下资源然后再设置一个点击监听来打开侧拉栏而已,没什么特别
效果显示图:
到这里,对DrawerLayout的简单使用就大概可以了,有跟多高深的操作,等我用到了再写续篇,哈哈哈。。。
- Android Drawer(抽屉,即侧拉栏)的简单使用:
- Android 导航抽屉---Navigation Drawer (DrawerLayout)使用
- Android的导航抽屉---Navigation Drawer
- Android的导航抽屉---Navigation Drawer
- Android Drawer抽屉布局的实现
- Drawer与Toolbar的简单使用(侧滑抽屉)--详解版
- Android Navigation Drawer(导航抽屉)
- 关于android抽屉,navigation drawer
- Android Navigation Drawer(导航抽屉)
- react-native中抽屉的使用(react-native-drawer)
- 简单导航抽屉(Navigation Drawer)
- Android Navigation Drawer(抽屉导航栏视图)
- Drawer与Toolbar的简单使用
- Android抽屉 DrawerLayout简单使用
- Android Drawer的实现
- Navigation Drawer的使用
- Navigation Drawer(导航抽屉)
- Navigation Drawer(导航抽屉)
- Servlet生命周期
- servlet编码与部署
- Codeforces Round #376 (Div. 2)
- Servlet 服务器 HTTP 响应
- HTTP中Get与Post的区别
- Android Drawer(抽屉,即侧拉栏)的简单使用:
- CSDN-markdown编辑器使用方法
- ubuntu下如何优雅地使用翻译
- java类与类之间的关系
- 管理学与情商
- [毕业季]感受2(10月17号)
- 二维码扫描
- Learning OpenStack Networking Neutron 2nd.Edition
- 简单的Yii框架应用