พื้นหลัง
ฉันได้รับมอบหมายให้สร้าง UI ที่ทำงานคล้ายกับที่ Google Maps แสดงแผ่นงานด้านล่างสำหรับผลลัพธ์ที่พบ
มีสามขั้นตอนที่แตกต่างกัน:
- เนื้อหาด้านล่าง พื้นที่ด้านบนยังคงสัมผัสได้และจะไม่เลื่อนอะไรเลยที่ด้านล่าง
- เนื้อหาเต็มหน้าจอในขณะที่พื้นที่ด้านบนมีส่วนหัวขนาดใหญ่
- เนื้อหาเต็มหน้าจอในขณะที่พื้นที่ด้านบนมีเพียงแถบเครื่องมือ
นี่คือสิ่งที่ฉันกำลังพูดถึงบน Google Maps:
ปัญหา
สิ่งนี้คือแผ่นงานด้านล่างยังไม่ได้เป็นส่วนหนึ่งของไลบรารีการออกแบบ (แม้ว่าจะมีการร้องขอที่นี่ )
ไม่เพียงแค่นั้น แต่ UI นั้นค่อนข้างซับซ้อนและต้องการการจัดการแถบเครื่องมือในหลาย ๆ ขั้นตอน
สิ่งที่ฉันพยายาม
ฉันพบไลบรารีที่ดี (เพียงพอ) สำหรับแผ่นงานด้านล่าง ( ที่นี่ ) และเพิ่มเนื้อหาลงในตัวอย่างส่วนย่อยเพื่อให้มีมุมมองเดียวกันกับที่แสดงในตัวอย่างการออกแบบวัสดุ (เช่นที่นี่ ) เพื่อให้มี CollapsingToolbarLayout ที่จะดูแล ของเฟส 2 + 3
ในแอพที่ฉันกำลังทำฉันต้องย้ายไอคอนด้วยในขณะที่คุณเลื่อน แต่ฉันคิดว่าถ้าฉันประสบความสำเร็จกับส่วนที่เหลือมันน่าจะง่าย นี่คือรหัส:
fragment_my.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
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.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/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.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="@style/TextAppearance.AppCompat.Title"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Friends"
android:textAppearance="@style/TextAppearance.AppCompat.Title"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Related"
android:textAppearance="@style/TextAppearance.AppCompat.Title"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"
android:src="@android:drawable/ic_menu_send"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>MyFragment.java
public class MyFragment extends BottomSheetFragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragment_my, container, false);
view.setMinimumHeight(getResources().getDisplayMetrics().heightPixels);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("AAA");
final Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
final AppCompatActivity activity = (AppCompatActivity) getActivity();
activity.setSupportActionBar(toolbar);
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
NavUtils.navigateUpFromSameTask(getActivity());
}
});
final ImageView imageView = (ImageView) view.findViewById(R.id.backdrop);
Glide.with(this).load(R.drawable.cheese_1).centerCrop().into(imageView);
return view;
}
}BottomSheetFragmentActivity.java
public final class BottomSheetFragmentActivity extends AppCompatActivity {
protected BottomSheetLayout bottomSheetLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_sheet_fragment);
bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
findViewById(R.id.bottomsheet_fragment_button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new MyFragment().show(getSupportFragmentManager(), R.id.bottomsheet);
}
});
bottomSheetLayout.setShouldDimContentView(false);
bottomSheetLayout.setPeekOnDismiss(true);
bottomSheetLayout.setPeekSheetTranslation(200);
bottomSheetLayout.setInterceptContentTouch(false);
bottomSheetLayout.setDefaultViewTransformer(new BaseViewTransformer() {
@Override
public void transformView(final float translation, final float maxTranslation, final float peekedTranslation, final BottomSheetLayout parent, final View view) {
Log.d("AppLog", "translation:" + translation + " maxTranslation:" + maxTranslation + " peekedTranslation:" + peekedTranslation);
}
});
}
}เกือบจะทำงานได้ดี ปัญหาเดียวคือการเปลี่ยนจาก # 3 กลับเป็น # 2:
คำถาม
รหัสผิดอะไร ฉันจะทำอะไรได้บ้างเพื่อให้บรรลุพฤติกรรมที่ต้องการ
@SD ฉันแน่ใจมากว่ามันไม่ใช่ 2 กิจกรรมเพราะคุณสามารถแตะหน้าจอเพื่อเลื่อนและสลับไปมาระหว่างเฟสได้ ไม่ได้หยุดให้คุณไปที่กิจกรรมถัดไป / ก่อนหน้า เมื่อเปิดกิจกรรมใหม่ฉันคิดว่าเป็นไปไม่ได้ที่จะยังคงมีกิจกรรมการสัมผัสแบบเดิมสำหรับกลไกการเลื่อน ฉันไม่แน่ใจด้วยซ้ำว่าเป็นไปได้ไหมโดยใช้ชิ้นส่วน แต่อาจเป็นไปได้มากกว่ากิจกรรม
—
นักพัฒนา android
@SD รู้วิธีทำให้ใช้งานได้ดี? ดีกว่าที่เคยเจอไหม?
—
นักพัฒนา Android
ฉันคิดว่าคุณควรดูห้องสมุดนี้
—
Savelii Zagurskii
CoordinatorLayoutบนหน้าจอที่ 2?