पृष्ठभूमि
मुझे एक यूआई बनाने का काम सौंपा गया है, जिसमें पाया जाता है कि Google मैप्स एक पाया परिणाम के लिए नीचे की शीट कैसे दिखाता है।
इसके तीन अलग-अलग चरण हैं:
- नीचे की सामग्री। ऊपरी क्षेत्र अभी भी छूने योग्य है और नीचे कुछ भी स्क्रॉल नहीं करेगा
- पूर्ण स्क्रीन सामग्री, जबकि ऊपरी क्षेत्र में एक बड़ा हेडर है।
- पूर्ण स्क्रीन सामग्री, जबकि ऊपरी क्षेत्र में सिर्फ टूलबार है।
यहां मैं Google मानचित्र के बारे में बात कर रहा हूं:
समस्या
बात यह है, नीचे की शीट अभी तक डिजाइन लाइब्रेरी का हिस्सा नहीं है (हालांकि यह अनुरोध किया गया था, यहां )।
इतना ही नहीं, लेकिन यूआई काफी जटिल है और कई चरणों में टूलबार को संभालने की जरूरत है।
मैंने क्या कोशिश की है
मैंने नीचे शीट ( यहाँ ) के लिए एक अच्छा (पर्याप्त) पुस्तकालय पाया है , और इसके टुकड़े के नमूने में सामग्री जोड़ दी है, सामग्री डिजाइन नमूनों (जैसे यहां ) पर दिखाए गए समान विचारों के बारे में , एक 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 से संक्रमण है:
प्रश्न
कोड में क्या गलत है? आवश्यक व्यवहार प्राप्त करने के लिए मैं क्या कर सकता हूं?
@ मुझे यकीन है कि यह 2 गतिविधियां नहीं हैं, क्योंकि आप चरणों के बीच स्क्रॉल करने और स्विच करने के लिए स्क्रीन को छूते रह सकते हैं। यह आपको अगली / पिछली गतिविधि पर जाने के लिए नहीं रोकता है। एक नई गतिविधि खोलते समय, मुझे नहीं लगता कि स्क्रॉल तंत्र के लिए समान स्पर्श घटनाओं को जारी रखना संभव है। मुझे यह भी पता नहीं है कि टुकड़ों का उपयोग करना संभव है, लेकिन यह संभवतः गतिविधियों से अधिक संभव है।
—
एंड्रॉयड डेवलपर
@SD क्या आप जानते हैं कि यह कैसे काम करता है? क्या मैंने जो पाया है, उससे बेहतर है?
—
एंड्रॉइड डेवलपर
मुझे लगता है कि आपको इस लाइब्रेरी पर एक नज़र डालनी चाहिए ।
—
Savelii Zagurskii
CoordinatorLayout2 स्क्रीन पर इस्तेमाल किया ?