Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

开发者头条(二):侧滑菜单

$
0
0

看了别人的博客,学着自己写出来,原文:http://blog.csdn.net/lowprofile_coding/article/details/51186965

实现侧滑功能,点击侧拉栏条目,改变内容页的数据。

知识点 + 逻辑

效果图:

这里写图片描述

怎么实现的侧栏功能:

使用DrawerLayout实现侧滑功能,根布局是DrawerLayout,先是内容页布局,再是侧栏栏布局,顺序不可乱,侧栏栏是根据layout_gravity属性来决定的。*

注意:要去掉app的title,不要使用ActionBar或ToolBar,因为如果使用了,那么侧拉页会在Title的下方,而不会像效果图中的那样,覆盖顶部标题。顶部的布局是自定义的。
DrawerLayout:实现侧拉页出现除了调用方法openDrawer(..)外,还可以在边缘拉出。

详见:Android中级:ActionBar + DrawerLayout实现侧滑菜单 Android5.0:Toolbar + DrawerLayout 实现侧滑效果

怎么实现侧拉页在左边

drawerLayout.openDrawer(Gravity.LEFT);

或者侧拉页布局中设置

android:layout_gravity="left"

侧栏页的item点击时+点击后颜色的变化,item背景色的变化是怎么实现的?

item文字的变化是通过selector实现的,但如果只是设置selector,那么先点击item1,item的文字变蓝色,再点击item2,item2的文字变蓝色,但是item1的文字还是蓝色,我们应该只是允许当前点击的item变色,那么还需要做什么呢?

我们在item的点击事件中先把所有的item的selector设为false,再把当前的设为true。

代码:

setAllFalse();
rl_home.setSelected(true);

setAllFalse():

rl_home.setSelected(false);
rl_gift.setSelected(false);
rl_share.setSelected(false);

怎么实现点击item来改变内容页的数据

1主内容页是标题 + FramLayout ,用Fragment来替换内容页FrameLayout,并对外提供一个方法设置数据
2 通过findViewById(id)找到item,设置点击监听事件,在监听中调用fragment提供的方法实现数据的设置。

// 用HomeFragment替换framelayout
fm = getSupportFragmentManager();
homeFragment = new HomeFragment();
fm.beginTransaction().add(R.id.layout_content, homeFragment, "HomeFragment").commit();
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    tv = new TextView(context);
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(30);
    tv.setText("这是首页");
    return tv;
}

public void setText(String text){
    tv.setText(text);
}

导航栏 + 状态栏的半透明 、 状态栏的背景色是怎么设置的

通过给窗体添加flag,代码如下,我照着博主的写了一遍,但是有 bug,不知道怎么回事,页面直接跑到状态栏的立体面下方(Z轴),而不是屏幕的下方。前2张图是我的,后2张是原创作者的。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4 API:19
    //设置透明状态栏
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    //设置状态栏颜色
    getWindow().setBackgroundDrawableResource(R.color.title_bg);
    //设置导航栏透明
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

图一:
这里写图片描述
图二:
这里写图片描述
图三:
这里写图片描述
图四:
这里写图片描述

DrawerLayout常用的方法:

方法 含义
openDrawer(int gravity) 打开侧拉页
closeDrawer() 关闭侧栏页

完整代码;

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <include layout="@layout/layout_title" />

        <FrameLayout
            android:id="@+id/layout_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </FrameLayout>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:orientation="vertical" >

      <include layout="@layout/layout_menu"/>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

layout_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/text_white"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/title_bg"
        android:gravity="center_vertical" >

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="20dp"
            android:src="@drawable/default_avatar" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@id/iv_avatar"
            android:gravity="center_vertical"
            android:text="开发者头条账号"
            android:textSize="20sp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_home"
        style="@style/item_menu_style"
        android:layout_marginTop="20dp" >

        <ImageView
            android:id="@+id/iv_home"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_home" />

        <TextView
            android:id="@+id/tv_home"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_home"
            android:text="首页" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_gift"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_gift"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_gift" />

        <TextView
            android:id="@+id/tv_gift"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_gift"
            android:text="礼物兑换" />
    </RelativeLayout>

    <include layout="@layout/line" />

    <RelativeLayout
        android:id="@+id/rl_share"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_share"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_my_shares" />

        <TextView
            android:id="@+id/tv_share"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_share"
            android:text="我的分享" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/rl_subjects"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_subjects"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_subscribed_subjects" />

        <TextView
            android:id="@+id/tv_subjects"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_subjects"
            android:text="我的订阅" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/rl_favorites"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_favorites"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_favorite" />

        <TextView
            android:id="@+id/tv_favorites"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_favorites"
            android:text="我的收藏" />
    </RelativeLayout>

    <include layout="@layout/line" />

     <RelativeLayout
        android:id="@+id/rl_create_subject"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_create_subject"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_create_subject" />

        <TextView
            android:id="@+id/tv_create_subject"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_create_subject"
            android:text="立即创建主体" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/rl_my_subjects"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_my_subjects"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_created_subjects" />

        <TextView
            android:id="@+id/tv_my_subjects"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_my_subjects"
            android:text="我创建的主题" />
    </RelativeLayout>

    <include layout="@layout/line" />


         <RelativeLayout
        android:id="@+id/rl_feedback"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_feedback"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_feedback" />

        <TextView
            android:id="@+id/tv_feedback"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_feedback"
            android:text="意见反馈" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/rl_cooperation"
        style="@style/item_menu_style" >

        <ImageView
            android:id="@+id/iv_cooperation"
            style="@style/iv_item_menu_style"
            android:src="@drawable/nav_icon_cooperation" />

           <TextView
            android:id="@+id/tv_cooperation"
            style="@style/tv_item_menu_style"
            android:layout_toRightOf="@id/iv_cooperation"
            android:text="合作申请" />
    </RelativeLayout> 

</LinearLayout>

layout_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/title_bg"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv_navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:src="@drawable/ic_menu_white_24dp" />

    <TextView 
         android:layout_width="0dp"
         android:layout_weight="1"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_marginLeft="10dp"
        android:textColor="@color/text_white"
        android:textSize="20sp"
        android:text="开发者头条"/>


    <ImageView
        android:id="@+id/iv_seacher"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_search_white_24dp" />
</LinearLayout>

MainActivity.java

package com.cqc.developerheadlinecqc.activity;

import com.cqc.developerheadlinecqc.R;
import com.cqc.developerheadlinecqc.R.layout;
import com.cqc.developerheadlinecqc.R.menu;
import com.cqc.developerheadlinecqc.fragment.HomeFragment;
import com.cqc.developerheadlinecqc.utils.ToastUtil;

import android.os.Build;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.util.Log;
import android.view.Gravity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends FragmentActivity implements OnClickListener {

    private DrawerLayout drawerLayout;
    private ImageView iv_navigation;
    private ImageView iv_seacher;
    private RelativeLayout rl_home;
    private RelativeLayout rl_gift;
    private RelativeLayout rl_share;
    private TextView tv_home;
    private TextView tv_gift;
    private TextView tv_share;
    private HomeFragment homeFragment;
    private FragmentManager fm;
    private Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        findViews();
        initViews();
    }

    private void initViews() {
        // 实现侧拉
        iv_navigation.setOnClickListener(this);
        iv_seacher.setOnClickListener(this);

        // 点击改变字体颜色和内容页
        rl_home.setOnClickListener(this);
        rl_gift.setOnClickListener(this);
        rl_share.setOnClickListener(this);

        // 用HomeFragment替换framelayout
        fm = getSupportFragmentManager();
        homeFragment = new HomeFragment();
        fm.beginTransaction()
                .add(R.id.layout_content, homeFragment, "HomeFragment")
                .commit();

        // 默认选中“首页”
        rl_home.setSelected(true);

//      setWindowStatus();//有bug
    }

    private void setWindowStatus() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4 API:19
            //设置透明状态栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //设置状态栏颜色
            getWindow().setBackgroundDrawableResource(R.color.title_bg);
            //设置导航栏透明
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
    }

    private void findViews() {
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        iv_navigation = (ImageView) findViewById(R.id.iv_navigation);
        iv_seacher = (ImageView) findViewById(R.id.iv_seacher);

        rl_home = (RelativeLayout) findViewById(R.id.rl_home);
        rl_gift = (RelativeLayout) findViewById(R.id.rl_gift);
        rl_share = (RelativeLayout) findViewById(R.id.rl_share);

        tv_home = (TextView) findViewById(R.id.tv_home);
        tv_gift = (TextView) findViewById(R.id.tv_gift);
        tv_share = (TextView) findViewById(R.id.tv_share);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.iv_navigation:
            drawerLayout.openDrawer(Gravity.LEFT);
            break;
        case R.id.iv_seacher:
            ToastUtil.showShortToast(context, "搜索");
            break;
        case R.id.rl_home:
            setAllFalse();
            rl_home.setSelected(true);
            drawerLayout.closeDrawers();
            homeFragment.setText("这是首页");
            break;
        case R.id.rl_gift:
            setAllFalse();
            rl_gift.setSelected(true);
            drawerLayout.closeDrawers();
            homeFragment.setText("这是礼物兑换");
            break;
        case R.id.rl_share:
            setAllFalse();
            rl_share.setSelected(true);
            drawerLayout.closeDrawers();
            homeFragment.setText("这是我的分享");
            break;

        default:
            break;
        }

    }

    private void setAllFalse() {
        rl_home.setSelected(false);
        rl_gift.setSelected(false);
        rl_share.setSelected(false);
    }

}
作者:ss1168805219 发表于2016/9/11 22:26:57 原文链接
阅读:45 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles