Luí*_*nha 5 java xml android android-layout android-fragments
我正在尝试创建一个布局,该布局将折叠工具栏与其下方的标签栏集成在一起,该标签栏在用户向上滚动后仍然可见。我的问题是标签栏粘在 MainActivity 工具栏下的屏幕顶部。我正在使用带有片段的滑动窗口活动,并且这个片段为每个选项卡嵌套了片段,每个选项卡都有自己的布局。我正在按照此处的示例使用支持设计库来实现此目的。
我的主片段布局代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/details_header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@mipmap/ic_action_share"
app:backgroundTint="@color/primary_dark"
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="@mipmap/ic_action_location"
app:backgroundTint="@color/primary_dark"
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|center"/>
<android.support.design.widget.AppBarLayout
android:id="@+id/tabanim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:baselineAligned="false"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</TabHost>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Run Code Online (Sandbox Code Playgroud)
对于这个简化选项卡片段布局的实例,让我们假设我只有一个回收视图:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="@+id/dummyfrag_bg"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_material_light">
<android.support.v7.widget.RecyclerView
android:id="@+id/dummyfrag_scrollableview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
Run Code Online (Sandbox Code Playgroud)
主活动布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="@+id/DrawerLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar"/>
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@color/white_transparent"
android:scrollbars="vertical"/>
</android.support.v4.widget.DrawerLayout>
Run Code Online (Sandbox Code Playgroud)
工具栏布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Run Code Online (Sandbox Code Playgroud)
主活动类:
public class MainActivity extends AppCompatActivity {
private final static int PROFILE_FRAGMENT = 1;
private final static int PRIZES_FRAGMENT = 2;
private final static int SALES_FRAGMENT = 3;
private final static int ABOUT = 4;
private int currentFragment = 1;
private String currentFragmentName = "ProfileFragment";
public int HEADER_IMAGE = R.drawable.avatar;
private DrawerLayout drawer;
private List<DrawerItem> dataList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
}
RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
mRecyclerView.setHasFixedSize(true);
dataList = new ArrayList<>();
addItemsToDataList();
NavDrawerAdapter mAdapter = new NavDrawerAdapter(dataList, this, "Person name", "Person email", HEADER_IMAGE);
mRecyclerView.setAdapter(mAdapter);
RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
drawer.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
this, drawer, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
drawer.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
onTouchDrawer(currentFragment);
final GestureDetector mGestureDetector =
new GestureDetector(MainActivity.this, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
});
mRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
@Override
public boolean onInterceptTouchEvent(RecyclerView recyclerView, MotionEvent motionEvent) {
View child = recyclerView.findChildViewUnder(motionEvent.getX(), motionEvent.getY());
if (child != null && mGestureDetector.onTouchEvent(motionEvent)) {
drawer.closeDrawers();
onTouchDrawer(recyclerView.getChildLayoutPosition(child));
return true;
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
});
}
private void addItemsToDataList() {
dataList.add(new DrawerItem(getString(R.string.title_profile), R.mipmap.ic_action_profile));
dataList.add(new DrawerItem(getString(R.string.title_prizes), R.mipmap.ic_action_prizes));
dataList.add(new DrawerItem(getString(R.string.title_sales), R.mipmap.ic_action_sales));
dataList.add(new DrawerItem(getString(R.string.title_about),R.mipmap.ic_action_about));
}
public void openFragment(final Fragment fragment) {
int backStackEntryCount = getSupportFragmentManager()
.getBackStackEntryCount();
if (!fragment.toString().equalsIgnoreCase(currentFragmentName)) {
switchContent(fragment);
}
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.container, fragment)
.commit();
}
private void onTouchDrawer(final int position) {
currentFragment = position;
switch (position) {
case PROFILE_FRAGMENT:
openFragment(new ProfileFragment());
setTitle(getString(R.string.title_profile));
break;
case PRIZES_FRAGMENT:
openFragment(new PrizesFragment());
setTitle(getString(R.string.title_prizes));
break;
case SALES_FRAGMENT:
openFragment(new SalesFragment());
setTitle(getString(R.string.title_sales));
break;
case ABOUT:
openFragment(new AboutFragment());
setTitle(getString(R.string.title_about));
break;
default:
}
}
public void switchContent(Fragment fragment) {
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, fragment)
.addToBackStack(fragment.getClass().getSimpleName())
.commit();
}
Run Code Online (Sandbox Code Playgroud)
}
片段类:
public class SaleFragment extends TemplateFragment {
CollapsingToolbarLayout collapsingToolbar;
ViewPager viewPager;
TabLayout tabLayout;
ViewPagerTabAdaper adapter;
public SaleDetailFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View result = inflater.inflate(R.layout.fragment_sale_detail, container, false);
ViewPager pager = (ViewPager) result.findViewById(R.id.tabanim_viewpager);
setupViewPager(pager);
return (result);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
final Toolbar toolbar = (Toolbar) view.findViewById(R.id.anim_toolbar);
getMainActivity().setSupportActionBar(toolbar);
getMainActivity().getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Sale Detail");
ImageView header = (ImageView) view.findViewById(R.id.header);
Picasso.with(getActivity().getApplicationContext()).load(R.drawable.details_header).fit().into(header);
viewPager = (ViewPager) view.findViewById(R.id.tabanim_viewpager);
tabLayout = (TabLayout) view.findViewById(R.id.tabanim_tabs);
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
List<String> listData = new ArrayList<>();
int ct = 0;
for (int i = 0; i < VersionModel.data.length * 2; i++) {
listData.add(VersionModel.data[ct]);
ct++;
if (ct == VersionModel.data.length) {
ct = 0;
}
}
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
switch (tab.getPosition()) {
case 0:
Toast.makeText(getActivity(), "Sales", Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(getActivity(), "Store Description", Toast.LENGTH_SHORT).show();
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void setupViewPager(ViewPager viewPager) {
adapter = new ViewPagerTabAdaper(getActivity().getSupportFragmentManager());
adapter.addFrag(new DummyFragment(getResources().getColor(R.color.accent_material_light)), "Sales");
adapter.addFrag(new DummyFragment(getResources().getColor(R.color.ripple_material_light)), "Store Description");
viewPager.setAdapter(adapter);
}
public static class DummyFragment extends android.support.v4.app.Fragment {
int color;
SimpleRecyclerAdapter adapter;
public DummyFragment() {
}
@SuppressLint("ValidFragment")
public DummyFragment(int color) {
this.color = color;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tabs_fragment, container, false);
final FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.dummyfrag_bg);
frameLayout.setBackgroundColor(color);
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.dummyfrag_scrollableview);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity().getBaseContext());
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setHasFixedSize(true);
List<String> list = new ArrayList<>();
for (int i = 0; i < VersionModel.data.length; i++) {
list.add(VersionModel.data[i]);
}
adapter = new SimpleRecyclerAdapter(list);
recyclerView.setAdapter(adapter);
return view;
}
}
Run Code Online (Sandbox Code Playgroud)
}
视图寻呼机选项卡适配器:
public class ViewPagerTabAdaper extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerTabAdaper(FragmentManager manager) {
super(manager);
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(android.support.v4.app.Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
Run Code Online (Sandbox Code Playgroud)
}
我的目标是获得一个看起来像——这个——的布局
这样折叠工具栏在向上滚动时会折叠,只有片段标题工具栏和选项卡可见,然后在向下滚动时返回。我已经尝试了很多解决方案,但它们要么将选项卡固定在底部,要么不起作用,通常会折叠工具栏,这不是这里的选项。
感谢所有的建议和感谢。
我能够按照此处发布的示例解决此问题发布的示例解决此问题。\n主要问题是 app:layout_collapseMode="parallax" 属性使图像填充整个空间并覆盖其中的元素,并且我发现 AppBarLayout 扩展了 LinearLayout 所以它接受 TabLayout 上的属性 android:layout_gravity="bottom" ,因此将其强制到底部。\n然后我根据需要添加了元素以获得下面的最终布局:
\n\n<?xml version="1.0" encoding="utf-8"?>\n<android.support.design.widget.CoordinatorLayout\n android:id="@+id/main_content"\n xmlns:android="http://schemas.android.com/apk/res/android"\n xmlns:app="http://schemas.android.com/apk/res-auto"\n android:layout_width="match_parent"\n android:layout_height="match_parent">\n\n <android.support.design.widget.AppBarLayout\n android:id="@+id/appbar"\n android:layout_width="match_parent"\n android:layout_height="300dp"\n android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">\n\n <android.support.design.widget.CollapsingToolbarLayout\n android:id="@+id/collapsing_toolbar"\n android:layout_width="match_parent"\n android:layout_height="match_parent"\n app:layout_scrollFlags="scroll|exitUntilCollapsed">\n\n <ImageView\n android:id="@+id/header"\n android:layout_width="match_parent"\n android:layout_height="match_parent"\n android:layout_marginBottom="?attr/actionBarSize"\n android:background="@drawable/details_header"/>\n\n\n <LinearLayout\n android:id="@+id/smth"\n android:layout_width="match_parent"\n android:layout_height="wrap_content"\n android:layout_gravity="bottom"\n android:layout_marginBottom="?attr/actionBarSize"\n android:background="#f8f5ee"\n android:orientation="vertical">\n\n\n <TextView\n android:id="@+id/text_store_page_name"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginStart="18dp"\n android:layout_marginTop="35dp"\n android:text="LEITARIA QUINTA DO PA\xc3\x87O"\n android:textColor="#000000"\n android:textSize="20sp"\n android:textStyle="bold"/>\n\n <TextView\n android:id="@+id/textView14"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginStart="13dp"\n android:layout_marginTop="3dp"\n android:drawableLeft="@mipmap/ic_action_profile"\n android:text="Pastelaria caseira"\n android:textAppearance="?android:attr/textAppearanceMedium"\n android:textColor="#000000"/>\n </LinearLayout>\n\n <android.support.design.widget.FloatingActionButton\n android:id="@+id/fab"\n android:layout_width="45dp"\n android:layout_height="45dp"\n android:layout_gravity="right"\n android:layout_marginTop="115dp"\n android:elevation="0dp"\n android:src="@mipmap/ic_action_share"/>\n\n <android.support.design.widget.FloatingActionButton\n android:id="@+id/fab_location"\n android:layout_width="45dp"\n android:layout_height="45dp"\n android:layout_gravity="right"\n android:layout_marginEnd="68dp"\n android:layout_marginTop="115dp"\n android:elevation="0dp"\n android:src="@mipmap/ic_action_location"/>\n\n <android.support.design.widget.FloatingActionButton\n android:id="@+id/fab_share"\n android:layout_width="45dp"\n android:layout_height="45dp"\n android:layout_gravity="right"\n android:layout_marginEnd="130dp"\n android:layout_marginTop="115dp"\n android:elevation="0dp"\n android:src="@mipmap/ic_action_share"/>\n\n <de.hdodenhof.circleimageview.CircleImageView\n android:id="@+id/prize_icon"\n android:layout_width="70dp"\n android:layout_height="70dp"\n android:layout_marginStart="16dp"\n android:layout_marginTop="115dp"\n android:src="@drawable/eclair"/>\n\n\n <android.support.v7.widget.Toolbar\n android:id="@+id/anim_toolbar"\n android:layout_width="match_parent"\n android:layout_height="?attr/actionBarSize"\n android:background="@color/transparent"\n app:layout_collapseMode="parallax"\n app:layout_scrollFlags="scroll|enterAlways"\n app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>\n\n\n <android.support.design.widget.TabLayout\n android:id="@+id/tabanim_tabs"\n android:layout_width="match_parent"\n android:layout_height="?attr/actionBarSize"\n android:layout_gravity="bottom"\n android:gravity="center"\n app:tabGravity="center"\n app:tabIndicatorColor="#F1514A"\n app:tabMode="scrollable"\n app:tabSelectedTextColor="@android:color/white"\n app:tabTextColor="#99ffffff"/>\n\n </android.support.design.widget.CollapsingToolbarLayout>\n </android.support.design.widget.AppBarLayout>\n\n <android.support.v4.view.ViewPager\n android:id="@+id/tabanim_viewpager"\n android:layout_width="match_parent"\n android:layout_height="match_parent"\n app:layout_behavior="@string/appbar_scrolling_view_behavior"/>\n\n\n</android.support.design.widget.CoordinatorLayout>\nRun Code Online (Sandbox Code Playgroud)\n\n感谢@skynet 提供的非常有用的参考资料。
\n