برنامه نویسی موبایل اندروید

۲ مطلب با موضوع «برنامه نویسی اندروید» ثبت شده است

تب لی اوت (TabLayout)

عکس : سایت http://www.androidhive.info  

علت نوشتن این پست این بود که من از تب لی اوت همراه با ویوپیجر برای پروژه ایی که داشتم روش کار می کردم استفاده کرده بودم اما یک جای کار ایراد داشت اونم این بود که من چهار تا تب داشتم و هرکدام از اونها از وب سرویس اطلاعات رو می گرفت . بعضی عملیات در داخل این تب ها به هم وصل بود. همراه با انجام اون عملیات باید تب کناری هم رفرش میشد.

یک ویژگی viewpager این است که setoffscreenpagelimit  برای اون حداقل می تونه یک باشه. 

Setoffscreenpagelimit = امکان این که چند تب از هر دو طرف تب در حال اجرای شما، همزمان با هم لود شوند.

من میخواستم که وقتی بین تب ها هر وقت سویچ می کنم فرگمنت داخل اونها کامل Destroy‌ بشه و دوباره از اول ساخته بشه اما این عمل انجام نمی شد یعنی اگر شما بلافاصله به تب های کناریتون سویچ کنید،‌اونها از قبل لود شدن. هرکاری کردم این کار درست نشده که بتونم کاری کنم که تب های کناری بدون اینکه Select بشن لود نشن از قبل. بعد از کلی تحقیق متوجه شدم که  راهی جز حذف ویوپیجر ندارم.

این Tablayout whithout Viewpager   لینکی است که ازش استفاده کردم برای این کار 


بعد از استفاده از این روش متوجه مشکل دیگه ای شدم این بود که هنگامی که داخل فرگمنتها که Tablayout‌ بود. 

اولین تب اجرا نمی شد اما وقتی روی دومین تب کلیک می کنیم همه چی به حالت عادی برمیگرده و درست  عمل میکنه.

راه حلش رو پیدا کردم و براتون قرار دادم امیدوارم بتونه به صرفه جویی در زمان شما کمک کنه.


چند نکته هست که باید رعایت کنید 
۱- در کد رو به رو باید اخرین فرگمنت دست چپ رو قرار بدهید. (منظور شماره اون هست)
tabs_fragment.getTabAt(1).select();

۲- کدهایی رو که مربوط به Ui نیست رو در متد onActivityCreat‌ قراردهید. 

۳-  یکی از نکته هایی که من متوجه شدم این بود که در این روش اولویت ها مهم هستن یعنی از بالا اخرین فرگمنت سمت چپ می باشد.(دلیل آن هم انگلیسی بودن این موضوع است که  سازندگان از چپ اول را در نظر می گیرند و ما میخوایم برای فارسی از راست در نظر بگیریم) . 
true  را هم به اخرین تب سمت چپی می دهیم. در حالت نرمال باید به اولین تب سمت راست true‌ را در نظر بگیریم که هنگام اجرا روی اولین تب سمت راست سلکت شده باشد اما در اینجا برعکس است.

private void setupTabLayout() {
   
fragment2 = new RequestFrienshipFragment();
   
fragment1 = new FriendshipFragment();
   
tabs_fragment.addTab(tabs_fragment.newTab().setText("two"), true);
   
tabs_fragment.addTab(tabs_fragment.newTab().setText("one"));
}


۴- اولویتی که رو هم که در بالا اجرا کردیم باید همین را در این قسمت اجرا کنیم.

private void setCurrenttabFragment(int tabPosition) {
   
switch (tabPosition) {
       
case 0:
            replaceFragment(
fragment2);
           
break;
       
case 1:
            replaceFragment(
fragment1);
           
break;
    }
}

اگر سوالی در مورد Tablayout‌ داشتید در قسمت نظرات بپرسید در کمترین زمان پاسخ گوی شما هستم. 


کد کامل :

public class FriendsFragment2 extends Fragment {
    CustomTabLayout
tabs_fragment;
    FriendshipFragment
fragment1;
    RequestFrienshipFragment
fragment2;
   
public FriendsFragment2() {
       
// Required empty public constructor
   
}

   
@Nullable
    @Override
   
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container
            ,
@Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.
fragment_friends2, container, false);
       
tabs_fragment = (CustomTabLayout) rootView.findViewById(R.id.tabs_fragment);
       
return rootView;
    }
   
@Override
   
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
       
super.onActivityCreated(savedInstanceState);

       setupTabLayout();
       EventTab();
       
tabs_fragment.post(new Runnable() {
           
@Override
           
public void run() {
               
tabs_fragment.getTabAt(1).select();
            }
        });
   }

   
private void setupTabLayout() {
       
fragment2 = new RequestFrienshipFragment();
       
fragment1 = new FriendshipFragment();
       
tabs_fragment.addTab(tabs_fragment.newTab().setText("درخواست دوستی"), true);
       
tabs_fragment.addTab(tabs_fragment.newTab().setText("دوستان"));
    }
   
private void EventTab() {
       
tabs_fragment.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           
@Override
           
public void onTabSelected(TabLayout.Tab tab) {
                setCurrenttabFragment(tab.getPosition());
            }

           
@Override
           
public void onTabUnselected(TabLayout.Tab tab) {
            }
           
@Override
           
public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }
   
private void setCurrenttabFragment(int tabPosition) {
       
switch (tabPosition) {
           
case 0:
                replaceFragment(
fragment2);
               
break;
           
case 1:
                replaceFragment(
fragment1);
               
break;
        }
    }
   
private void replaceFragment(Fragment fragment) {
        FragmentManager fm = getChildFragmentManager();
        FragmentTransaction ft = fm.beginTransaction();
;         ft.replace(R.id.frame_container_friends_fragment, fragment);
        ft.setTransition(FragmentTransaction.
TRANSIT_FRAGMENT_OPEN);
        ft.commit()

۱ نظر موافقین ۰ مخالفین ۰
ُسینا رحیمی

Bottom Sheets در اندروید

bottom-sheet

باتم شیت (Bottom sheet) یکی از امکانات متریال دیزاین می باشد، که به کتابخانه ی دیزاین ساپورت در ورژن 23.2 اضافه شده بود.  باتم شیت یک  پنجره بسیار ساده است که از پایین صفحه ظاهر می شود، و میتواند اطلاعات بیشتری به کاربر نشان دهد. نمونه ی باتم شیت را می توان در بعضی اپلیکیشن های گوگل و ویجت ها مشاهده کرد، مانند انتخاب مکان از Api ‌مکانی.
در این پست ، ما میخواهیم نحوه ی استفاده از باتم شیت در اپلیکیشن را به شما نشان دهیم. باتم شیت میتواند قسمتی از رابطه کاربری یا یک مدل موقت باشد. برای رسیدن به این امکانات،‌ امکاناتی را که کتابخانه ساپورت دیزاین برای شما فراهم می کند شامل :


BottomSheetBehavior  : میتواند در CoordinatorLayout استفاده شود.
BottomSheetDialog : که یک دیالوگ همراه با رفتار باتم شیت می باشد.
BottomSheetDialogFragment :  که بسطی از DialogFragment، که یک aBottomSheetDialog  ساخته به جای یک دیالوگ استاندارد.

برای شروع و استفاده باتم شیت در اپلیکیشن شما، کتابخانه ساپورت را به  dependecy  خود در فایل build.gradle  اضافه کنید.





compile 'com.android.support:design:'


ساخت یک باتم شیت ثابت : یک لی اوت با بهCoordinatorLayout به عنوان لایه ی اصلی بسازید،‌ س‍پس یک view یا layout برای باتم شیت،‌ بصورت آنکه فرزند مستقیم CoordinatorLayout درست کنید. لی اوت باتم شیت باید صفت app:layout_behavior را در خود داشته باشد،‌ با مقدار android.support.design.widget.BottomSheetBehavior. به عنوان مثال:


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.mayojava.sample.bottomsheetdemo.MainActivity">

   <!-- main content layout-->
   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin">
       ......
   </RelativeLayout>

   <!-- bottom sheet layout -->
   <RelativeLayout
       android:id="@+id/linear_layout_bottom_sheet"
       android:layout_width="match_parent"
       android:layout_height="220dp"
       app:behavior_peekHeight="80dp"
       app:behavior_hideable="true"
       app:layout_behavior="@string/string_bottom_sheet_behavior"
       android:elevation="@dimen/z_bottom_sheet"
       android:background="@color/color_bottom_sheet">
       <TextView
           android:id="@+id/text_view_sheet_title"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="@string/text_pull_to_show_more"
           android:textSize="@dimen/text_size_medium"
           android:padding="@dimen/activity_vertical_margin"/>

       <TextView
           android:id="@+id/text_view_more_content"
           android:text="@string/text_more_contet_to_user"
           android:textSize="@dimen/text_size_big"
           android:textStyle="bold"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@+id/text_view_sheet_title"
           android:paddingLeft="@dimen/activity_vertical_margin"
           android:paddingRight="@dimen/activity_vertical_margin"/>

       <Button
           android:text="@string/text_click_me"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentLeft="true"
           android:layout_marginLeft="@dimen/activity_vertical_margin"
           android:layout_marginRight="@dimen/activity_vertical_margin"

           android:layout_marginTop="@dimen/activity_vertical_margin" android:layout_below="@+id/text_view_more_content"/>

   </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

برای آنکه باتم شیت قابل نشان دادن شود،‌با نیاز به ساخت BottomSheetBehavior داریم. که با فراخوانی BottomSheetBehavior.from() انجام می شود،‌ با فرستادن ویویی که درست کردیم برای این فرخوانی استفاده می کنیم. اینکار از طریق Activity‌ که در آن از باتم شیت استفاده کردیم انجام می شود.



LinearLayout bottomSheetLayout  
    = (LinearLayout) findViewById(R.id.layout_bottom_sheet);

//get bottom sheet behavior from bottom sheet view
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(mLayoutBottomSheet);

با بازگشت به آبجکت BottomSheetBehavior،‌می تواند متد setState‌را فراخوانی کرد،‌ با فرستادن رفتار ثابت،‌که موقعیت باتم شیت را تحت تاثیر قرار می دهد.
  •  BottomSheetBehavior.STATE_EXPANDED : باتم شیت را به طور کامل باز می کند. 
  • BottomSheetBehavior.STATE_HIDE باتم شیت را به طور کامل از دید خارج می کند. 
  • BottomSheetBehavior.STATE_COLLAPSED ارتفاع باتم شیت را به همراه با تنظیم آن در اتریبیوت peekHeight .
//to expand the bottom sheet
mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

//to collapse the bottom sheet
mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

peekHeight ‌می تواند به عنوان پیش نمایش هنگامی که صفحه ظاهر می شود استفاده شود. از طریق اتریبیوت behavior_peekHeight در فایل xml‌ یا در کد،‌  با  فراخوانی setPeekHeighton  در آبجکت BottomSheetBehavior  استفاده شود.

);mbottomSheetBehavior.setPeekHeight(320);

ساخت یک مدل باتم شیت 


مدل باتم شیت یک دیالوگ همراه با رفتار باتم شیت می باشد،‌ و همچنین قسمتی از هایراکی ویو شما نیست. می تواند به عنوان منوی جایگزین استفاده شود،‌ انتخاب کننده محتوا یا یه عنوان یک دیالوگ ساده در اپلیکیشن شما باشد. 

Create a class that extends BottomSheetDialogFragment, inflated with the layout that will be used as the content of the modal dialog.


یک کلاس بسازید که از BottomSheetDialogFragment   اکستند(extends ) شده باشد،‌ لی اوت را inflated کرده  که در اینجا به عنوان محتوای مدل دیالوگ ما استفاده می شود.


layout_custom_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <ImageView
        android:id="@+id/ic_image"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/margin_normal"
        android:layout_marginTop="@dimen/activity_vertical_margin"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello bottom sheet"
        android:textSize="@dimen/text_size_medium"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_toRightOf="@+id/ic_image"
        android:layout_alignTop="@+id/ic_image"/>

    <TextView
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_below="@+id/ic_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_lorem_ipsum"
        android:lineSpacingExtra="@dimen/margin_small"
        android:layout_marginBottom="@dimen/margin_normal"/>


</RelativeLayout>
یک instance  از از باتم شیت ساخته و با متد show‌ آن را نمایش دهید، با پاس دادن FragmentManager  و رشته ی tag‌  به عنوان  پارامتر.


CustomBottomSheetDialog bottomSheetDialog = CustomBottomSheetDialog.getInstance();
bottomSheetDialog.show(getSupportFragmentManager(), "Custom Bottom Sheet");

result_bottom_sheet
. کد کامل را می توانید از لینک روبه رو دانلود کنید
منبع : mayojava.github.io


۰ نظر موافقین ۰ مخالفین ۰
ُسینا رحیمی