android介面設計（一）側邊欄的兩種實現方式
阿新 • • 發佈：2019-01-13
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'
<?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); } }
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;
}
}
左右欄涉及的佈局：
左邊：
<?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>右側佈局：
<?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檔案，用於展示列表項：
<?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);
}
}預設的樣式帶有預設的頂部導航欄actionBar，比較難看，可以去掉，自定義一個,可以在AndroidManifest.xml檔案中的樣式Apptheme改動為：NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">