رسم واجهة التوجيه الجذابة في Android

أولاً نلقي نظرة على واجهة المستخدم التي سنقوم بتطويرها (ثلاث صور، عند السحب إلى النهاية سيظهر زر البدء في التجربة، وسيتم سحب النقطة الحمراء معه):

أولاً نلقي نظرة على ملف التخطيط:

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/activity_guide"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:contex="com.coderwei.a71_zhbj.activity.GuideActivity">
   <android.support.v4.view.ViewPager>
     android:id="@+id/vp_guide"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     />
   <Button
     android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="70dp"
    android:padding="10dp"
    android:id="@+id/start_btn"
    android:textColor="#f1eaea"
   android:background="#e71616"
   android:text="البداية تجربة"
   android:visibility="invisible"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="30dp"
   <LinearLayout
     android:id="@+id/ll_container"
     android:layout_width="wrap_content"
    android:layout_height="wrap_content">
   </LinearLayout>
  <ImageView
    android:id="@+id/iv_red"
   android:src="@drawable/shap_red"
   android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
 </RelativeLayout>
 </RelativeLayout>

ثم يأتي البرنامج النصي:

public class GuideActivity extends Activity {
   private ViewPager mViewPager;
   private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
   private ArrayList<ImageView> mImageViewList;
   private LinearLayout llContainer;
   private ImageView ivRedPoint;
   private int mPaintDis;
   private Button start_btn;
  @Override
 protected void onCreate(Bundle savedInstanceState) {
   uper.onCreate(savedInstanceState);
   requestWindowFeature(Window.FEATURE_NO_TITLE);
   setContentView(R.layout.activity_guide);
   mViewPager = (ViewPager)findViewById(R.id.vp_guide);
   llContainer = (LinearLayout) findViewById(R.id.ll_container);
   ivRedPoint = (ImageView) findViewById(R.id.iv_red);
   start_btn = (Button) findViewById(R.id.start_btn);
   initData();
   GuideAdapter adapter = new GuideAdapter();
   mViewPager.setAdapter(adapter);
   //يستمع إلى إنتهاء عملية التخطيط لمساحة العرض هل تم تحديد موقع التخطيط؟
    ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
       //مجنب التكرار في التبليغات  لغرض التكامل مع الأنظمة القديمة، تم استخدام طريقة قديمة
        ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        //بعد إكمال التكوين يتم الحصول على المسافة بين النقطة الصغيرة الأولى والثانية
        mPaintDis =  llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft();
        System.out.println("المسافة: " + mPaintDis);
      }
   });
  //مراقبة تمرير ViewPager
  mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
     //إ回调 في عملية التمرير
     @Override
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
     //عندما يتم التمرير إلى Pager الثاني، نسبة positionOffset ستكون 0، وسيكون position 1، لذا يجب إضافة position*mPaintDis
     int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
     //في وحدة التكوين الأم لـ控件 يُضبط margin اليمنى
      RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)ivRedPoint.getLayoutParams();
     params.leftMargin = letfMargin;
     ivRedPoint.setLayoutParams(params);
     }
     @Override
      public void onPageSelected(int position) {
        System.out.println("position:"+position);
        if (position==mImageViewList.size()-1){
         start_btn.setVisibility(View.VISIBLE);
       }
     }
     @Override
      public void onPageScrollStateChanged(int state) {
       System.out.println("state:"+state);
      }
    });
  }
  private void initData(){
    mImageViewList = new ArrayList<>();
    لـ(int i=0; i<mImageIds.length; i++){
      //create ImageView and put mImgaeViewIds into it
      ImageView view = new ImageView(this);
      view.setBackgroundResource(mImageIds[i]);
      //add to the ImageView collection
      mImageViewList.add(view);
     //small round dot  a small gray dot is an ImageView
     ImageView pointView = new ImageView(this);
      pointView.setImageResource(R.drawable.shape);
      //initialize layout parameters, initialize the layout parameters of the parent control
     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
     if (i>0){
       //when the number of small round dots added exceeds one, set the left margin of the current small round dot to 10dp;
        params.leftMargin=10;
      }
     //set the width and height of the small gray dot to wrap the content
      pointView.setLayoutParams(params);
      //add the small gray dot to the LinearLayout
      llContainer.addView(pointView);
    }
   }
 class GuideAdapter extends PagerAdapter{
    //number of items
    @Override
    public int getCount() {
       return mImageViewList.size();
    }
    @Override
     public boolean isViewFromObject(View view, Object object) {
       return view == object;
    }
    //initialize item layout
     @Override
     public Object instantiateItem(ViewGroup container, int position) {
       ImageView view = mImageViewList.get(position);
      container.addView(view);
      return view;
    }
    //destroy item
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View)object);
    }
  }
 } 

النقطة الصغيرة البيضاء:

<?xml version="1.0" encoding="utf-8"?>
<shape
   android:shape="oval"
   xmlns:android="http://schemas.android.com/apk/res/android">
   <!--نقطة صغيرة بيضاء-->
   <solid android:color="#cccccc"/>
   <size android:width="10dp" android:height="10dp"/>
</shape>

النقطة الحمراء:

<?xml version="1.0" encoding="utf-8"?>
 <shape
   android:shape="oval"
   xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#f00"/>
   <size android:width="10dp" android:height="10dp"/>
 </shape>

ViewPage بسيط للغاية، كما تم شرح ذلك بشكل مفصل في المقالة السابقة، هنا لن أتفصل، ولكن النقطة الرئيسية هي أن النقطة الحمراء تتحرك مع Pager

في الواقع هناك ثلاث نقاط صغيرة بيضاء، ثم على أعلى نقطة صغيرة بيضاء هناك نقطة حمراء صغيرة، من خلال حساب المسافة بين النقطة الصغيرة البيضاء الأولى والثانية، يمكننا استخدام استماع ViewPager للتحرك، ثم تحريك النقطة الحمراء مع pager (تغير هو الهوامش الداخلية للوحدة الأب)

عند حساب المسافة بين النقاط الصغيرة الحمراء يجب الانتباه إلى أنه يجب انتظار تحديد موقع التخطيط للحصول على مسافة النقاط الصغيرة الحمراء (عملية إنشاء الواجهة العلوية mesasure->layout(تحديد الموقع)->draw(يتم تنفيذ هذا الدوال بعد تنفيذ onCreate في activity))، لذا يجب إعداد الاستماع إلى التخطيط:

ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()

ثم الحصول على المسافة بين النقاط الصغيرة الحمراء:

mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();

هذا يجب أن يكون ملاحظة هذا الكود:
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;

النسبة المئوية للتمرير الحالي، عندما يدخل الصفحة الثانية، يكون القيمة 0،
الوضع يمثل الصفحة الحالية، يبدأ من 0، مما يعني أنني عندما أتحرك إلى الصفحة الثانية، يكون mPaintDis * 0 + 1 * mPaintDis;

النقاط الأساسية:

　　1- الصفحة مكونة من ViewPager + Button + RelativeLayout(LinearLayout + TextView)،
　　2- LinearLayout يحتوي على النقاط الرمادية الصغيرة، عدد النقاط الرمادية الصغيرة يعتمد على عدد ViewPager، لذا عند إضافة النقاط الرمادية الصغيرة إلى LinearLayout، يتم ذلك في نفس الوقت مع إضافة مصادر الصور إلى مجموعة ViewPager.
　　3- ثم الشريط الأحمر الصغير هو TextView بسبب السبب النسبي، سيكون موقع الشريط الأحمر الصغير الأولي مشابهًا لموقع النقطة الرمادية الأولى،
　　4- ثم استمع إلى حدث التمرير في ViewPager، من خلال حساب الفارق بين اليسار لشريط الأصفر الصغير في اليسار إلى اليسار لLinearLayout، لتحريك موقع الشريط الأحمر الصغير، ولكن يجب التأكد من أن موقع التحريك يجب أن يكون موضع التحريك قد تم تحديده، لذا يجب علينا الاستماع إلى تحديد التركيب، والانتظار حتى يتم تحديد التركيب، ثم حساب الفارق في الموقع.

هذا هو محتوى المقال الكامل، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تدعموا دليل التدريب المذكور.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق الطبع والنشر تعود إلى صاحبها، تم جمع المحتويات بواسطة المستخدمين على الإنترنت بطرق متفرقة، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا اكتشفت محتوى يشتبه في انتهاك حقوق الطبع والنشر، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') للإبلاغ، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.