android界面设计(一)侧边栏的两种实现方式

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

一、使用slideingMenu结合fragment实现。

二、使用Navigation和DrawerLayout实现。

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

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

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

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



    

    

其中两个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);
    }
}

com.zhengyuan.leftsideslip.fragment.RightFragment:

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;
    }
}

左右栏涉及的布局:

左边:




    

        
        
    

    

右侧布局:




    


        
    

    

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



    
        设置
        我的
        关注
        ...
    

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);
    }
}

默认的样式带有默认的顶部导航栏actionBar,比较难看,可以去掉,自定义一个,可以在AndroidManifest.xml文件中的样式Apptheme改动为:NoActionBar