android界面设计（一）侧边栏的两种实现方式一、使用slideingMenu结合fragment实现。二、使用Navigation和DrawerLayout实现。

74 阅读 0 评论 49 点赞

我是靠谱客的博主大方期待，这篇文章主要介绍android界面设计（一）侧边栏的两种实现方式一、使用slideingMenu结合fragment实现。二、使用Navigation和DrawerLayout实现。，现在分享给大家，希望可以做个参考。

dome：https://github.com/linliangliang/sidebar

一、使用slideingMenu结合fragment实现。

二、使用Navigation和DrawerLayout实现。

第二种实现方式：https://mp.csdn.net/postedit/84613568

1、下面介绍使用sideingMenu的方式实现侧边栏。

主界面activity_main.xml,（用到v4的包，如果报错记得在gradle中添加相关包,版本改成自己的targetSdkVersion）

复制代码

1
2
implementation 'com.android.support:appcompat-v7:26.0.0'
implementation 'com.android.support:support-v4:26.0.0'

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/spl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <fragment
        android:id="@+id/fragment_left"
        android:name="com.zhengyuan.leftsideslip.fragment.LeftFragment"
        android:layout_width="200dp"
        android:layout_height="match_parent" />

    <fragment
        android:id="@+id/fragment_right"
        android:name="com.zhengyuan.leftsideslip.fragment.RightFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.SlidingPaneLayout>

其中两个fragment分别显示侧边栏和主界面，name属性的两个类需要自定义实现，如下：

com.zhengyuan.leftsideslip.fragment.LeftFragment：

复制代码

package com.zhengyuan.leftsideslip.fragment;

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;

import com.zhengyuan.leftsideslip.R;

/**
 * Created by 林亮 on 2018/11/22
 */
public class LeftFragment extends Fragment {
    private setWebsite website;
    private ListView lv;

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.leftlayout, null);
        init(root);
        return root;
    }

private void init(View root) {
        lv = (ListView) root.findViewById(R.id.lv);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> paren, View view, int position, long id) {
                switch (position) {
                    case 0:
                        website.changeWebsite("http://www.sina.com");
                        break;
                    case 1:
                        website.changeWebsite("http://www.qq.com");
                        break;
                    case 2:
                        website.changeWebsite("http://www.163.com");
                        break;
                    case 3:
                        website.changeWebsite("http://www.taobao.com");
                        break;
                }
            }
        });
    }

@Override
    public void onAttach(Context context) {
        super.onAttach(context);
        website = (setWebsite) context;//把activity向下转型成我们定义的接口，注意这里要强转
    }

//创建回调接口，来回调mainactivity
    public interface setWebsite {
        public void changeWebsite(String url);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package com.zhengyuan.leftsideslip.fragment;

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;

import com.zhengyuan.leftsideslip.R;

/**
 * Created by 林亮 on 2018/11/22
 */
public class LeftFragment extends Fragment {
    private setWebsite website;
    private ListView lv;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.leftlayout, null);
        init(root);
        return root;
    }

    private void init(View root) {
        lv = (ListView) root.findViewById(R.id.lv);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> paren, View view, int position, long id) {
                switch (position) {
                    case 0:
                        website.changeWebsite("http://www.sina.com");
                        break;
                    case 1:
                        website.changeWebsite("http://www.qq.com");
                        break;
                    case 2:
                        website.changeWebsite("http://www.163.com");
                        break;
                    case 3:
                        website.changeWebsite("http://www.taobao.com");
                        break;
                }
            }
        });
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        website = (setWebsite) context;//把activity向下转型成我们定义的接口，注意这里要强转
    }

    //创建回调接口，来回调mainactivity
    public interface setWebsite {
        public void changeWebsite(String url);
    }
}

com.zhengyuan.leftsideslip.fragment.RightFragment：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.zhengyuan.leftsideslip.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;

import com.zhengyuan.leftsideslip.R;


/**
 * Created by 林亮 on 2018/11/22
 */
public class RightFragment extends Fragment {
    private WebView wv;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.i("test==", "RightFragment onCreateView");
        View root = inflater.inflate(R.layout.rightlayout, null);
        init(root);
        return root;
    }

    private void init(View root) {
        wv = (WebView) root.findViewById(R.id.wv);
    }

    public WebView getView() {//返回rightfragment的webview
        return wv;
    }
}

左右栏涉及的布局：

左边：

复制代码

<?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:orientation="vertical">

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/ic_launcher_background" />
        <TextView
            android:id="@+id/mane"
            android:layout_below="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:text="你的名字"/>
    </RelativeLayout>

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/leftitem"></ListView>

</LinearLayout>

右侧布局：

复制代码

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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:orientation="vertical">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/heap"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#03A9F4">


        <TextView
            android:id="@+id/title_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:ellipsize="end"
            android:gravity="center"
            android:singleLine="true"
            android:text="title"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</LinearLayout>

其中左侧栏中用到了一个数组，在values文件夹下面新建一个array.xml文件，用于展示列表项：

复制代码

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="leftitem">
        <item>设置</item>
        <item>我的</item>
        <item>关注</item>
        <item>...</item>
    </string-array>
</resources>

mainAcvityt.class;

复制代码

package com.zhengyuan.leftsideslip;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.zhengyuan.leftsideslip.R;
import com.zhengyuan.leftsideslip.fragment.LeftFragment;
import com.zhengyuan.leftsideslip.fragment.RightFragment;

public class MainActivity extends AppCompatActivity implements LeftFragment.setWebsite {
    SlidingPaneLayout spl;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        //沉浸式状态栏
        //4.4以上设置状态栏为透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        // 5.0以上系统状态栏透明，
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //window.setStatusBarColor(Color.TRANSPARENT);//设置状态栏颜色和主布局背景颜色相同
            window.setStatusBarColor(Color.parseColor("#03A9F4"));//设置状态栏为指定颜色
        }
        super.onCreate(savedInstanceState);
        Log.i("test==","setContentView1");
        setContentView(R.layout.activity_main);
        Log.i("test==","setContentView2");
        init();
    }

private void init() {
        spl = (SlidingPaneLayout) findViewById(R.id.spl);
        spl.closePane();
        changeWebsite("http://www.baidu.com");//设置初始的webview界面为baidu
    }

//重写方法设置webview显示界面
    @Override
    public void changeWebsite(String url) {
        RightFragment rf = (RightFragment) MainActivity.this.getSupportFragmentManager().findFragmentById(R.id.fragment_right);
        WebView webView = rf.getView();
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        WebViewClient client = new WebViewClient();
        webView.setWebViewClient(client);
        webView.loadUrl(url);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
package com.zhengyuan.leftsideslip;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.zhengyuan.leftsideslip.R;
import com.zhengyuan.leftsideslip.fragment.LeftFragment;
import com.zhengyuan.leftsideslip.fragment.RightFragment;

public class MainActivity extends AppCompatActivity implements LeftFragment.setWebsite {
    SlidingPaneLayout spl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //沉浸式状态栏
        //4.4以上设置状态栏为透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        // 5.0以上系统状态栏透明，
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //window.setStatusBarColor(Color.TRANSPARENT);//设置状态栏颜色和主布局背景颜色相同
            window.setStatusBarColor(Color.parseColor("#03A9F4"));//设置状态栏为指定颜色
        }
        super.onCreate(savedInstanceState);
        Log.i("test==","setContentView1");
        setContentView(R.layout.activity_main);
        Log.i("test==","setContentView2");
        init();
    }

    private void init() {
        spl = (SlidingPaneLayout) findViewById(R.id.spl);
        spl.closePane();
        changeWebsite("http://www.baidu.com");//设置初始的webview界面为baidu
    }

    //重写方法设置webview显示界面
    @Override
    public void changeWebsite(String url) {
        RightFragment rf = (RightFragment) MainActivity.this.getSupportFragmentManager().findFragmentById(R.id.fragment_right);
        WebView webView = rf.getView();
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        WebViewClient client = new WebViewClient();
        webView.setWebViewClient(client);
        webView.loadUrl(url);
    }
}