Viewpager سفارشی در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Viewpager سفارشی در اندروید می پردازیم آموزش های مختلفی در رابطه با Viewpager یا Indicator برای شما قرار دادیم اما چون در بعضی از آنها از کتاب خانه استفاده کردیم شاید برخی بخواهند بدون استفاده از کتاب خانه این کار را انجام دهند در ادامه با ما همراه باشید.

ابتدا در main.xml یک Framlayout همانند زیر که شامل ViewPager است قرار میدهیم.

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >
    <!-- ViewPager -->
    <android.support.v4.view.ViewPager
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:id="@+id/viewPager" />
  <!-- Footer -->
  <include layout="@layout/footer"  />
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/white"

android:orientation="vertical" >

<android.support.v4.view.ViewPager

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:id="@+id/viewPager" />

</FrameLayout>

در کد بالا شما شما footer را ندارید در ادامه آن را قرار میدم.
قبل از اینکه فایل footer را ایجاد کنید باید یک شکل round با کد درست کنید یک فایل فای از نوع xml در پوشه drawable به نام rounded_cell.xml ایجاد کنید و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android">
    <shape android:shape="rectangle">
        <gradient
    android:startColor="@color/white"
    android:endColor="@color/white"
    android:angle="0"
    />
         <corners android:bottomLeftRadius="10dp"  android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp"/>
        <stroke android:color="@color/l_blue" android:width="1dp" />
    </shape>
</inset>

<?xml version="1.0" encoding="utf-8"?>

<gradient

android:startColor="@color/white"

android:endColor="@color/white"

android:angle="0"

</shape>

</inset>

در بالا از چند رنگ استفاده شده است که در فایل colors.xml تعریف شده اند شما هم باید کد زیر را قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFF</color>
    <color name="l_blue">#909BAA</color>
    <color name="d_blue">#6D7B92</color>
    <color name="gray">#CCCCCC</color>
    <color name="d_gray">#666</color>
    <color name="black">#000</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="gray">#CCCCCC</color>

</resources>

حالا کد footer.xml همانند زیر می شود (یک نوع layout است)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="15dip"
    android:background="@color/d_blue"
    android:layout_gravity="bottom"
    android:orientation="vertical" >
    <Button android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btn1"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/rounded_celll" />
     <Button android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btn2"
    android:layout_toRightOf="@id/btn1"
    android:layout_marginLeft="5dip"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/rounded_celll" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:padding="15dip"

android:background="@color/d_blue"

android:layout_gravity="bottom"

android:orientation="vertical" >

<Button android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/btn1"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:background="@drawable/rounded_celll" />

<Button android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:id="@+id/btn2"

android:layout_toRightOf="@id/btn1"

android:layout_marginLeft="5dip"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:background="@drawable/rounded_celll" />

</RelativeLayout>

یک لایه به نام layout_one.xml ایجاد کنید و کدهای زیر را در آن قرار دهید (این میشه صفحه های viewpager ما ما در ادامه دوتا درست می کنیم.)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:gravity="center|center"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="First Layout" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/white"

android:gravity="center|center"

android:orientation="vertical" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="First Layout" />

</LinearLayout>

یک کلاس جاوا برای layout بالا با نام LayoutOne.java ایجاد کرده و کد فرگمنت زیر را در آن قرار دهید (برای قرار دادن صفحه در viewpager شما باید یک فرگمنت درست کنید)

public class LayoutOne extends Fragment {
    public static Fragment newInstance(Context context) {
        LayoutOne f = new LayoutOne();
        return f;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);
        return root;
    }
}

public class LayoutOne extends Fragment {

public static Fragment newInstance(Context context) {

LayoutOne f = new LayoutOne();

return f;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);

return root;

}

حالا یک لایه دیگه به نام layout_two.xml ایجاد کنید و کدهای زیر را در آن قرار دهید (این لایه دوم ما هست که صفحه دوم viewpager را تشکیل میدهد).
یک کلاس جاوا به نام LayoutTwo.java ایجاد کنید و کدهای زیر را در آن قرار دهید. (فرگمنت دوم ما)

public class LayoutTwo extends Fragment {
    public static Fragment newInstance(Context context) {
        LayoutTwo f = new LayoutTwo();
        return f;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_two, null);
        return root;
    }
}

public class LayoutTwo extends Fragment {

public static Fragment newInstance(Context context) {

LayoutTwo f = new LayoutTwo();

return f;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_two, null);

return root;

}

باید یک آداپتور سفارشی برای ViewPager درست کنیم تا Viewpager کار کند.
برای اینکار یک کلاس جاوا به نام ViewPagerAdapter.java ایجاد کنید و کدهای زیر را در آن قرارد هید.

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private Context _context;
    public static int totalPage=2;
    public ViewPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        _context=context;
        }
    @Override
    public Fragment getItem(int position) {
        Fragment f = new Fragment();
        switch(position){
        case 0:
            f=LayoutOne.newInstance(_context);
            break;
        case 1:
            f=LayoutTwo.newInstance(_context);
            break;
        }
        return f;
    }
    @Override
    public int getCount() {
        return totalPage;
    }
}

public class ViewPagerAdapter extends FragmentPagerAdapter {

private Context _context;

public static int totalPage=2;

public ViewPagerAdapter(Context context, FragmentManager fm) {

super(fm);

_context=context;

}

@Override

public Fragment getItem(int position) {

Fragment f = new Fragment();

switch(position){

case 0:

f=LayoutOne.newInstance(_context);

break;

case 1:

f=LayoutTwo.newInstance(_context);

break;

}

return f;

}

@Override

public int getCount() {

return totalPage;

}

و در نهایت در بخش ViewPagerStyle2Activity.java (اکتیوتی اصلی ما ) کدهای زیر را قرار دهید.

public class ViewPagerStyle1Activity extends FragmentActivity {
    private ViewPager _mViewPager;
    private ViewPagerAdapter _adapter;
    private Button _btn1,_btn2;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        setUpView();
        setTab();
    }
    private void setUpView(){
     _mViewPager = (ViewPager) findViewById(R.id.viewPager);
     _adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());
     _mViewPager.setAdapter(_adapter);
     _mViewPager.setCurrentItem(0);
     initButton();
    }
    private void setTab(){
            _mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
                        @Override
                        public void onPageScrollStateChanged(int position) {}
                        @Override
                        public void onPageScrolled(int arg0, float arg1, int arg2) {}
                        @Override
                        public void onPageSelected(int position) {
                            // TODO Auto-generated method stub
                            btnAction(position);
                        }
                    });
    }
    private void btnAction(int action){
        switch(action){
          case 0: setButton(_btn1,"1",40,40); setButton(_btn2,"",20,20);break;
          case 1: setButton(_btn2,"2",40,40); setButton(_btn1,"",20,20); break;
        }
    }
    private void initButton(){
        _btn1=(Button)findViewById(R.id.btn1);
        _btn2=(Button)findViewById(R.id.btn2);
        setButton(_btn1,"1",40,40);
        setButton(_btn2,"",20,20);
    }
    private void setButton(Button btn,String text,int h, int w){
        btn.setWidth(w);
        btn.setHeight(h);
        btn.setText(text);
    }
}

public class ViewPagerStyle1Activity extends FragmentActivity {

private ViewPager _mViewPager;

private ViewPagerAdapter _adapter;

private Button _btn1,_btn2;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

setUpView();

setTab();

}

private void setUpView(){

_mViewPager = (ViewPager) findViewById(R.id.viewPager);

_adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());

_mViewPager.setAdapter(_adapter);

_mViewPager.setCurrentItem(0);

initButton();

}

private void setTab(){

_mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

@Override

public void onPageScrollStateChanged(int position) {}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {}

@Override

public void onPageSelected(int position) {

// TODO Auto-generated method stub

btnAction(position);

}

});

}

private void btnAction(int action){

switch(action){

case 0: setButton(_btn1,"1",40,40); setButton(_btn2,"",20,20);break;

case 1: setButton(_btn2,"2",40,40); setButton(_btn1,"",20,20); break;

}

private void initButton(){

_btn1=(Button)findViewById(R.id.btn1);

_btn2=(Button)findViewById(R.id.btn2);

setButton(_btn1,"1",40,40);

setButton(_btn2,"",20,20);

}

private void setButton(Button btn,String text,int h, int w){

btn.setWidth(w);

btn.setHeight(h);

btn.setText(text);

}

موفق باشید.

مطالعه بیشتر

Viewpager سفارشی در اندروید

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی