انجمن سایت کلیدستان


رتبه موضوع:
  • 1 رای - 3 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت اسلاید شو(قسمت 1 و قسمت 2)

آموزش ساخت اسلاید شو(قسمت 1 و قسمت 2)

#1
   

یکی از دوستان مشکل با ساخت اسلاید شو داشت و قرار دادن نوار حرکت برای تغییر صفحات.
گفتم یه آموزش قرار بدم که شاید به درد دوستان بخوره.
اولا اینکه این روش راحت هست یا خیر؟
برای هر برنامه نویس ممکنه یه قسمت از کد نویسی راحت باشه. پس نمیشه گفت کدوم کد راحته یا سخت.اما روشی که میشه استفاده کرد(یا خودم قبلا استفاده میکردم و به نظرم راحته) استفاده از فرگمنت هست. که خیلی جمع و جور هست .این آموزش دوقسمت داره.
 قسمت اول:(ساخت اسلاید شو هست) و قسمت دوم: ( قرار دادن نوار حرکت برای عوض کردن صفحه)

قسمت اول:
ما فرض میکنیم اسلاید شویی که میسازیم  3 صفحه داشته باشه.
قبل از هر چیز شما باید  دو عکس دایره ای شکل با فتوشاپ یا هر برنامه ای دیگه بسازید .که این دو عکس روند حرکت صفحه هات نشون بده .
که یکیش به رنگ سفید( cricle_white)و یکی به رنگ قرمز (cricle_red).. بعد از ساخت این دوعکس آنرا در پوشه drawableقرار دهید


روش کار:
ابتدا یک فایل xml به نام activity_viewpager بسازید. دراین فایل یک ViewPager داریم و یک layout  که زیر ViewPager  قرار داره .
این layout  زیرین به صورت افقی هست و 3 شی image داره .که نوار حرکت اسلاید شو نشون میده.

کد پی‌اچ‌پی:
<?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:orientation="vertical" >
   
 <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="fill_parent"
            android:layout_above="@+id/linear_show_move"
            android:layout_height="wrap_content" />
 <LinearLayout
    android:id="@+id/linear_show_move"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:gravity="center_horizontal"
     android:orientation="horizontal" >

     <ImageView
         android:id="@+id/imag1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/cricle_white"
    
         />
   
   <ImageView
         android:id="@+id/imag2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/cricle_withe"
         />
       
<ImageView
         android:id="@+id/imag3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/cricle_withe"
       
         />
 </LinearLayout>

</RelativeLayout> 


بعد از اینکار دو فایل به نام page1.xml و page2.xml و page3.xml میسازیم و محتوایی که میخواییم بسازیم داخلش میزاریم.
حالا در فایل جاوا به صورت زیر عمل میکنیم

کد پی‌اچ‌پی:
public class ViewPager extends FragmentActivity {

    
ImageView imag1;
    
ImageView imag2;
    
ImageView imag3;
    
    @
Override
    
public void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        
setContentView(R.layout.activity_view_pager);
        
ViewPager viewPager = (ViewPagerfindViewById(R.id.viewpager);
        
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()) );




در کد بالا ما  یک شی از viewPager ساختیم و آداپتور خودمون بهش پاس دادیم.

حالا کلاس آداپتور خودمون به این صورت تعریف میکنیم که این آداپتر از فرگمنت آداپتر ارث بری  کرده.

متدgetcount  و getItem  همانند  متدهایی هست که در BaseAdapter وجود داره، هست.یعنی تعداد آیتم و خود آیتم به ترتیب ،متدهای ذکر شده بر میگردونه.

کد پی‌اچ‌پی:
class MyPagerAdapter extends FragmentPagerAdapter {

      public 
MyPagerAdapter (FragmentManager fragmentManager)
      {
          
super(fragmentManager);
      }

      @
Override
      
public int getCount() {
          return 
3;
      }

      @
Override
      
public Fragment getItem(int position) {

      switch (
position){

          case 
0:
          {
             
              return new 
Page1();
          }
          case 
:
          {
              
              return new 
Page2();
          }

       case 
2:
        {
           return new 
page3(); 
           
         }

      }


  } 

تا الان یک viewPager رو ساختیم و آداپتر بهش پاس دادیم .حالا واسه این که صفحه ها داخل آیتم قرار بدیم کافیه 3 تا کلاسpage3, page1 , page2  بسازیم(که به صورت کلاس درونی کلاس ViewPager هستند) که ارث بری میکنه از فرگمنت.

کد پی‌اچ‌پی:
public class Page1 extends Fragment {

        @
Override
        
public void onCreate(Bundle savedInstanceState) {
            
super.onCreate(savedInstanceState);
           
    }

        @
Override
        
public View onCreateView(LayoutInflater inflaterViewGroup containerBundle savedInstanceState) {

            
LinearLayout customView = (LinearLayoutinflater.inflate(R.layout.page1container,false);
       
TextView T1=customView.findViewById(R.id.text1);

            return 
customView;

        }

 
    } 

در کد بالا،  در متد OncerateView   ما صفحه page1 رو inflate میکنیم و در یک شی میریزیم و سپس اون شی return میکنیم.

برای page2  و page3هم مانند page1 همین کار رو میکنیم.

حالا اسلاید شو ما ساخته شد و نمایش داده میشه..
امتیاز خوبی که این روش داره اینه که شما برای هر صفحه از اسلاید شو میتونید ساختار و صفحه بندی جدا گونه ای طراحی کنید که میتونه به برنامه اتون زیبایی و انعطاف پذیری بیشتری بده.
پاسخ
 سپاس شده توسط am5152 ، ramtin2080 ، admin ، 00Alireza00 ، dow ، mina73 ، s.saeid ، hamidreza2000

آموزش ساخت اسلاید شو(قسمت 1 و قسمت 2)

#2
قسمت دوم:
برای نمایش روند حرکت در اسلاید شو.
ابتدا سه تا ImageView  رو از فایل جاوا ارجاع بدید.

کد پی‌اچ‌پی:
ImageView imag1=(ImageView)findViewById(R.id.imag1);
ImageView imag2=(ImageView)findViewById(R.id.imag1);
ImageView iimag3=(ImageView)findViewById(R.id.imag1); 

بر روی شی ViewPager که در قسمت اول ساخته اید یک شنونده تغییر صفحه قرار بدهید..این شنونده زمانی فراخوانی میشود که صفحه تغییر کند.

کد پی‌اچ‌پی:
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @
Override
            
public void onPageSelected(int position) {
                
// TODO Auto-generated method stub
                
switch (position) {
                case 
0:
                {
                      
imag1.setImageDrawable(getResources().getDrawable(R.drawable.cricle_red));
                      
imag2.setImageDrawable(getResources().getDrawable(R.drawable.cricle_withe));
                    break;
                }
                case 
1:
                {
                      
imag1.setImageDrawable(getResources().getDrawable(R.drawable.cricle_withe));
                      
imag2.setImageDrawable(getResources().getDrawable(R.drawable.cricle_red));
                      
imag3.setImageDrawable(getResources().getDrawable(R.drawable.cricle_withe));
                    break;
                }
                case 
2:
                {
                      
imag2.setImageDrawable(getResources().getDrawable(R.drawable.cricle_withe));
                      
imag3.setImageDrawable(getResources().getDrawable(R.drawable.cricle_red));
                    break;
                }

            
                default:
                    break;
                }
            }
            
            @
Override
            
public void onPageScrolled(int arg0float arg1int arg2) {
                
// TODO Auto-generated method stub
                
            
}
            
            @
Override
            
public void onPageScrollStateChanged(int arg0) {
                
// TODO Auto-generated method stub
                
            
}
        }); 

در دستور بالا ما با متد onPageSelected  کار داریم...ورودی این متد یک پوزیشن هست که نشون میده ما در صفحه چندم اسلاید شو هستیم.(مقدار 0 یعنی صفحه اول   و مقدار 1 یعنی صفحه دوم...)
وقتی در صفحه ی اول هستیم(case 0)
کافی است عکس imag1  را به  قرمز رنگ تبدیل کنیم.و مابقی رو رنگ سفید.
وقتی در صفحه دوم هستیم(case 1)
کافی است عکس imag2   را به دایره قرمز رنگ و مابقی رو رنگ سفید
....
با این روش در واقع ما روند حرکت ViewPager رو شبیه سازی کردیم.(روشهای دیگه ای هم هست که ممکنه کوتاه تر باشد.)اما این روش ساده گی خودش داره.
پاسخ
 سپاس شده توسط am5152 ، admin ، 00Alireza00 ، dow ، mina73 ، so2011 ، s.saeid

آموزش ساخت اسلاید شو(قسمت 1 و قسمت 2)

#3
آقا دستت درد نکنه بابت آموزش
میشه لینک دانلود سورس رو هم بزارید؟
 
پاسخ
 سپاس شده توسط شماره مجازی امارات ، تلگرام ضد فیلتر 2023


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان