পটভূমি
আমাকে এমন একটি ইউআই তৈরি করার জন্য নিয়োগ দেওয়া হয়েছে যা গুগল ম্যাপস যেমন একটি ফলাফলের জন্য নীচের শিটটি দেখায় তার অনুরূপ আচরণ করে।
এর তিনটি ভিন্ন ধাপ রয়েছে:
- নীচের বিষয়বস্তু। উপরের অঞ্চলটি এখনও স্পর্শযোগ্য এবং নীচে কোনও কিছুই স্ক্রোল করবে না
- পূর্ণ স্ক্রিনের সামগ্রী, যখন উপরের অঞ্চলে একটি বড় শিরোনাম থাকে।
- পূর্ণ স্ক্রিনের সামগ্রী, যখন উপরের অঞ্চলে কেবলমাত্র সরঞ্জামদণ্ড রয়েছে।
আমি গুগল ম্যাপে যা বলছি তা এখানে:
সমস্যাটি
কথাটি হ'ল, নীচের শীটটি এখনও ডিজাইন লাইব্রেরির একটি অংশ নয় (যদিও এটি অনুরোধ করা হয়েছিল, এখানে )।
কেবল তা-ই নয়, ইউআই বেশ জটিল বলে মনে হচ্ছে এবং একাধিক পর্যায়ে সরঞ্জামদণ্ডটি পরিচালনা করা দরকার।
আমি কি চেষ্টা করেছি
নীচের শীটটির জন্য এখানে একটি ভাল (পর্যাপ্ত) লাইব্রেরি পেয়েছি ( এখানে ), এবং উপাদানগুলির নকশার নমুনাগুলিতে প্রদর্শিত একই মতামতগুলি দেখতে তার খণ্ডের নমুনায় কন্টেন্ট যুক্ত করেছি ( এখানে এখানে ) রাখতে হবে, যত্ন নেবে এমন একটি ক্যাপসিংটুলবারলয়আউট পেতে করেছি পর্যায়ক্রমে 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 টি কার্যক্রম নয়, কারণ আপনি স্ক্রোল করতে এবং পর্বগুলির মধ্যে স্যুইচ করতে স্ক্রিনটি স্পর্শ করতে পারেন। এটি আপনাকে পরবর্তী / পূর্ববর্তী ক্রিয়াকলাপে যেতে বাধা দেয় না। কোনও নতুন ক্রিয়াকলাপ খোলার সময়, আমি মনে করি না যে স্ক্রোলিং প্রক্রিয়াটির জন্য একই স্পর্শ ইভেন্টগুলি চালিয়ে যাওয়া সম্ভব। আমি টুকরো টুকরো ব্যবহার করা সম্ভব কিনা তাও নিশ্চিত নই, তবে ক্রিয়াকলাপগুলির চেয়ে এটি সম্ভবত আরও বেশি সম্ভব।
—
অ্যান্ড্রয়েড বিকাশকারী
@ এসডি আপনি কীভাবে এটি কার্যকরভাবে তৈরি করবেন জানেন? আমি যা খুঁজে পেয়েছি তার চেয়ে ভাল?
—
অ্যান্ড্রয়েড বিকাশকারী
আমি মনে করি আপনার এই লাইব্রেরিটি একবার দেখে নেওয়া উচিত ।
—
সাভেলি জাগুরস্কি
CoordinatorLayout২ য় পর্দায় ব্যবহৃত ?