Vuốt để chuyển sang màn hình mới

Trong ứng dụng đọc thơ Nhật cổ, ta đã biết cách để vuốt màn hình hiển thị bài thơ mới tại cùng vị trí giao diện. Bây giờ ta muốn vuốt để bật ra màn hình mới, có giao diện hoàn toàn khác. Giống như ra class khác, có thể xử lý trên màn hình mới một cách độc lập.

Ta vẫn dùng Viewpager nhưng theo kiểu khác, đổi nhiều file giao diện xml.

Tạo class tên tùy ý, sửa file activity_main.xml thành như sau.

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

<RelativeLayout 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=".MainActivity" >   

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

</RelativeLayout>

Trong thư mục layout hãy tạo các file ac.xml, ac2.xml, ac3.xml có thành phần lần lượt như sau.

ac.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#ffffff"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:text="Chữ ví dụ"

        android:textColor="#800000"

        android:textSize="20dp" />

    <EditText

        android:id="@+id/e"

        android:layout_width="85dp"

        android:layout_height="50dp"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:background="#ccccff"

        android:ems="10"

        android:gravity="center"

        android:hint="Dương lịch"

        android:textColor="#00F"

        android:textSize="16sp" >

        <requestFocus />

    </EditText>

    <TextView

        android:id="@+id/tv2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:text="Năm âm lịch là:"

        android:textColor="#800000"

        android:textSize="20dp" />

    <TextView

        android:id="@+id/tv3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:clickable="true"

        android:singleLine="true"

        android:textColor="#000080"

        android:textSize="20sp" />

    <Button

        android:id="@+id/bu1"

        android:layout_width="85dp"

        android:layout_height="40dp"

      android:layout_gravity="center"

        android:text="Nút 1"

        android:textColor="#0000cd"

        android:textSize="14sp" />

    <AnalogClock

        android:id="@+id/analog"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true" />

    <DigitalClock

        android:id="@+id/digital"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:textColor="#800000"

        android:textSize="20sp" />

</LinearLayout>

ac2.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:text="Chữ tại màn hình 2"

        android:textColor="#800000"

        android:textSize="20sp" />

    <Button

        android:id="@+id/bu1"

        android:layout_width="65dp"

        android:layout_height="40dp"

        android:layout_gravity="center"

        android:text="Nút 2"

        android:textColor="#0000cd"

        android:textSize="14sp" />

</LinearLayout>

ac3.xml

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp"

        android:text="Chữ ví dụ"

        android:textColor="#800000"

        android:textSize="20dp" />

    <ListView

        android:id="@+id/list"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="2dp"

        android:dividerHeight="1px"

        android:lineSpacingExtra="-8dp"

        android:singleLine="true"

        android:textColor="#00F" >

    </ListView>

    <Button

        android:id="@+id/bu"

        android:layout_width="105dp"

        android:layout_height="40dp"

        android:layout_gravity="center"

        android:text="Nút 3"

        android:textColor="#0000cd"

        android:textSize="15sp" />

</LinearLayout>

Tạo thêm một file li2.xml để dùng cho Listview

<?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="42sp" 

    android:background="@android:color/transparent" 

    android:orientation="horizontal" > 

    <TextView

        android:id="@+id/text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"

        android:layout_marginLeft="5sp"       

        android:textColor="#0000aa"

        android:textSize="18sp" />

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentEnd="true"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:layout_marginRight="10dp"

        android:contentDescription="@null"

        android:src="@drawable/ten" />

</RelativeLayout>

Nhớ copy cái ảnh đầu mũi tên vào trong thư mục drawable, nếu chưa có thư mục drawable thì tạo nó trong folder res.

Tạo một class có tên myadapter extends PagerAdapter

Khai báo các thành phần cần thiết.

ListView lv;

String[] qua = { "Pear", "Banana", "Cashew", "Orange", "Water melon","Peach", "Grape", "Mango", "Plum" };

ArrayAdapter<String> adapter;

Context con;

      public myadapter(Context context) {

            // super(context);

             this.con = context;

         }

Ta khai báo mảng cho ListView, adapter, context, cùng với phương thức khởi tạo.

Copy tiếp các dòng sau lên trên ngoặc đóng cuối cùng

public int getCount() {

        return 3;

    } 

    public Object instantiateItem(View collection, int position) {

LayoutInflater inflater = (LayoutInflater) collection.getContext()

                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        int resId = 0;

        switch (position) {

        case 0:

            resId = R.layout.ac;           

            break;

        case 1:

            resId = R.layout.ac2;

            break;

        case 2:

            resId = R.layout.ac3;

            break;

        }       

  View view = inflater.inflate(resId, null);   

       if(position==0){

        final TextView tv = (TextView) view.findViewById(R.id.tv2);

        tv.setText("Chữ tại layout 1");

        Button b1 = (Button) view.findViewById(R.id.bu1);

        b1.setOnClickListener(new View.OnClickListener() {

              @Override

              public void onClick(View v) {

                    tv.setText("Nút đã hoạt động"); 

              }

          });

        }

        else if(position==1){

          final TextView tv = (TextView) view.findViewById(R.id.tv);

            tv.setText("Chữ tại layout 2");

            Button b1 = (Button) view.findViewById(R.id.bu1);

            b1.setOnClickListener(new View.OnClickListener() {

              @Override

              public void onClick(View v) {

                    tv.setText("Nút đã hoạt động"); 

              }

          });

        }

        else {

          final TextView tv = (TextView) view.findViewById(R.id.tv);

            tv.setText("Chữ bên layout 3");

            Button b1 = (Button) view.findViewById(R.id.bu);

            b1.setOnClickListener(new View.OnClickListener() {

              @Override

              public void onClick(View v) {

                    tv.setText("Nút đã hoạt động"); 

              }

          });

            lv = (ListView) view.findViewById(R.id.list);         

          lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);             

          adapter=new ArrayAdapter<String>(con,R.layout.li2,R.id.text, qua);        

          lv.setOnItemClickListener(new OnItemClickListener() {

              @Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {

    int sodong = arg2+1;

 Toast.makeText(con, "Bạn vừa chạm vào dòng "+sodong,

                             Toast.LENGTH_SHORT).show();

              }

          });

    lv.setAdapter(adapter);

  }     

((ViewPager) collection).addView(view, 0);

   return view;

    }

    @Override

    public void destroyItem(View arg0, int arg1, Object arg2) {

        ((ViewPager) arg0).removeView((View) arg2);

    }

    @Override

    public boolean isViewFromObject(View arg0, Object arg1) {

        return arg0 == ((View) arg1);

    }

    @Override

    public Parcelable saveState() {

        return null;

    }

Import các thư viện cần dùng vào.

Quay lại class MainActivity, copy các dòng sau xuống dưới setContentView

myadapter adapter = new myadapter(this);

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

viewPager.setAdapter(adapter);       

viewPager.setCurrentItem(0);

Bây giờ chạy thử để thấy ứng dụng có 3 màn hình khác nhau, có thể vuốt ra các màn hình mới, ấn nút để thấy tác vụ trên mỗi màn hình.

Bây giờ hãy nhìn lại các class, ta chỉ có đúng hai class, thế thì cái gì điều khiển các màn hình kia?

Đó chính là các dòng lệnh trong class myadapter, bắt đầu từ dưới dòng View view = inflater.inflate(resId, null); là các lệnh if

Nếu layout bật ra là ac, ta tham chiếu địa chỉ cho nút bấm, textview của nó, set lệnh, chú ý các dòng tham chiếu địa chỉ giờ phải gắn chữ view vào.

Button b1 = (Button) view.findViewById(R.id.bu1);

Nếu không có chữ view này sẽ bị lỗi.

Nếu vị trí là 1 ta tham chiếu tới layout ac2, set lệnh cho nút của nó.

Nếu vị trí là 2 tức còn lại thì là ac3, ta set lệnh cho nút và tạo listView như bình thường, chỉ có dòng tạo adapter.

adapter=new ArrayAdapter<String>(con,R.layout.li2,R.id.text, qua);

Trong ngoặc là chữ con tức context đã khai báo trên đầu class. Ở đây không dùng chữ this như bình thường được.

Ấn nút để thấy listView hiện ra dòng toast chứng tỏ nó đã hoạt động.

Thay vì tạo nhiều class thì ta chỉ còn làm trong class tạo adapter, xử lý trong đó hết các màn hình. Class MainActivity chỉ đóng vao trò cầu nối để vuốt ra các màn hình sau.

Kiểu làm này giúp ta đa dạng hóa cách trình bày, thay vì dùng nút bấm chuyển màn hình, ta có thể để mũi tên hoặc một dòng nhắc để người dùng vuốt sang màn hình mới.