SlidingPanelLayout为在UI最上层的使用提供了一个水平的,多个面板的布局。左边的面板可以看作是一个内容列表或者是浏览,右边的面板的任务是显示详细的内容。
SlidingPaneLayout类是直接继承于ViewGroup类,所以这个类也是当作容器类使用,在使用时通常可以和Fragement组件一起使用。
1.xml部分:
1.布局根视图为android.support.v4.widget.SlidingPaneLayout,指明id
2.第一个元素为左侧导航面板:布局随意,宽(固定)小于你的屏幕大小,高度match_parent,方向: android:layout_gravity="left"。
第二个元素为内容面板:布局随意,宽和高为match_parent。
2.java代码:
1.绑定SlidingPaneLayout,
2.方法: 1.setSliderFadeColor()设置当左侧面板打开,内容面板的覆盖颜色值(透明);
2.setShadowResourceLeft()设置左侧面板和内容面和接壤区域的图片;
3.判断左侧面板是否打开:isOpen();
4.打开左侧面板:openPane();
5.关闭左侧面板:closePane();
3.setPanelSlideListener()设置左侧面板滑动的监听,方法如下: 1.public void onPanelSlide(View panel, float slideOffset);// 左侧面板滑动的过程(slideOffset滑动的偏移量(0-1))
2.public void onPanelOpened(View panel); //左侧面板打开
3.public void onPanelClosed(View panel);//左侧面板关闭
1.activity_main3.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/slidingpanelayout_practice" tools:context="com.example.slidingpanelayoutpractice.threepractice.Main3Activity"> <ListView android:layout_width="400dp" android:layout_height="match_parent" android:id="@+id/list_practice_view"> </ListView> <FrameLayout android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> </android.support.v4.widget.SlidingPaneLayout>
2.Main3Activity.java
package com.example.slidingpanelayoutpractice.threepractice; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.widget.SlidingPaneLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AbsListView; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.FrameLayout; import android.widget.ListView; import com.example.slidingpanelayoutpractice.R; import com.example.slidingpanelayoutpractice.threepractice.fragment.FragmentPracticeOne; import com.example.slidingpanelayoutpractice.threepractice.fragment.FragmentPracticeThree; import com.example.slidingpanelayoutpractice.threepractice.fragment.FragmentPracticeTwo; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class Main3Activity extends AppCompatActivity implements AbsListView.OnItemClickListener { private SlidingPaneLayout mSlidingPaneLayout; private ListView listView; private List<String> list; private List<Fragment> fragments; private FragmentPracticeOne mFragmentPracticeOne; private FragmentPracticeTwo mFragmentPracticeTwo; private FragmentPracticeThree mFragmentPracticeThree; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getSupportActionBar().hide(); setContentView(R.layout.activity_main3); //初始化控件 initView(); //初始化数据 initData(); //监听事件 initEvent(); } private void initEvent() { listView.setOnItemClickListener(this); } private void initData() { list = Arrays.asList("神奇", "奇迹", "神奇奇迹"); fragments = new ArrayList<Fragment>(); listView.setAdapter(new ArrayAdapter( this, R.layout.list_item_mainthree, R.id.list_item_text_practice_three, list)); defalutFragment(); } private void initView() { listView = (ListView) findViewById(R.id.list_practice_view); mSlidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.slidingpanelayout_practice); } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); switch (position) { case 0:{ if (mFragmentPracticeOne == null) { mFragmentPracticeOne = new FragmentPracticeOne(); transaction.add(R.id.framelayout, mFragmentPracticeOne); fragments.add(mFragmentPracticeOne); } else { transaction.show(mFragmentPracticeOne); } break; } case 1:{ if (mFragmentPracticeTwo == null) { mFragmentPracticeTwo = new FragmentPracticeTwo(); transaction.add(R.id.framelayout, mFragmentPracticeTwo); fragments.add(mFragmentPracticeTwo); } else { transaction.show(mFragmentPracticeTwo); } break; } case 2:{ if (mFragmentPracticeThree == null) { mFragmentPracticeThree = new FragmentPracticeThree(); transaction.add(R.id.framelayout, mFragmentPracticeThree); fragments.add(mFragmentPracticeThree); } else { transaction.show(mFragmentPracticeThree); } break; } default:{ break; } } transaction.commit(); mSlidingPaneLayout.closePane();//关掉左侧菜单 } /** * 一开始隐藏所有的Fragment * * @param transaction * FragmentTransaction */ private void hideFragment(FragmentTransaction transaction) { for (Fragment fragment : fragments) { transaction.hide(fragment); } } /** * 刚进入页面的时候,初始化第一个碎片 */ private void defalutFragment(){ FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); FragmentPracticeOne fragmentPractice = new FragmentPracticeOne(); transaction.add(R.id.framelayout, fragmentPractice); transaction.commit(); } }
3.然后是Main3Activity.java中使用的Fragment文件大同小异,现在只贴出FragmentPracticeOne的。
package com.example.slidingpanelayoutpractice.threepractice.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.slidingpanelayoutpractice.R; /** * Created by xiaobaiyang on 2018/4/13. */ public class FragmentPracticeOne extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragmentpracticeone, container, false); } }
fragmentpracticeone.xml.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/d" android:scaleType="centerCrop"/> </LinearLayout>
程序运行效果图: