仿慕課網視訊播放介面協調佈局
阿新 • • 發佈:2019-01-04
近日使用慕課網APP的時候,發現一個頁面效果感覺很有意思(正常情況下頁面可以滑動,但是當頁面中播放視訊的時候,只有
下面可以滑動),所以仿照這做了一個,效果圖如下:
主要是通過改變AppBarLayout的Flag來實現的,可以參考:https://www.jianshu.com/p/7caa5f4f49bd
本Demo上傳至:http://download.csdn.net/download/eueheuen/10212787
需要加入Design包:
implementation 'com.android.support:design:26.1.0'
主要程式碼:
具體程式碼實現xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:background= "@color/colorMain"
android:layout_width="match_parent"
android:layout_height="30dp" />
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="250dp">
<RelativeLayout
android:id="@+id/rl_show"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorAccent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="這裡可以設定你自己的佈局" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#000"
app:tabTextColor="#fff" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
MainActivity:
public class MainActivity extends BaseActivity implements View.OnClickListener {
private RelativeLayout rlShow;
private AppBarLayout.LayoutParams mParams;
private TabLayout mTableLayout;
private ViewPager mViewPager;
private ArrayList<Fragment> data;
@Override
public int setLayout() {
return R.layout.activity_main;
}
@Override
public void initView() {
data = new ArrayList<>();
rlShow = (RelativeLayout) findViewById(R.id.rl_show);
mTableLayout = findViewById(R.id.tabs);
mViewPager = findViewById(R.id.viewpager);
rlShow.setOnClickListener(this);
data.add(new FragmentOne());
data.add(new FragmentTwo());
data.add(new FragmentThree());
}
@Override
public void initData() {
//初次設定的滑動方式(Flag)
mParams = (AppBarLayout.LayoutParams) rlShow.getLayoutParams();
mParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), data);
mViewPager.setAdapter(myFragmentAdapter);
mTableLayout.setupWithViewPager(mViewPager);
}
@Override
public void onClick(View v) {
//點選圖片後改變Flag
Toast.makeText(this,"鎖定",Toast.LENGTH_SHORT).show();
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) rlShow.getLayoutParams();
params.setScrollFlags(0);
rlShow.setLayoutParams(params);
}
}