Wednesday, October 4, 2017

ScrollView

Khi ta làm ứng dụng dài quá thì ta cần dùng ScrollView để cuộn xuống được.
Tại baidau, ta cho thêm một ảnh nữa giống cái đang có và set khoảng cách với dòng chữ trên cùng rộng ra, bây giờ ta sẽ không đủ chiều dài để hiển thị.

Để có thể cuộn xuống ta dùng Scrollview cho riêng hai cái ảnh thôi, tức là dòng chữ ở trên vẫn cố định không cuộn.
<ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@null"
        android:src="@drawable/abc" />
 <ImageView      
        android:layout_width="500dp"
        android:layout_height="230dp"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@null"
        android:src="@drawable/abc" />
 </LinearLayout>
  </ScrollView>
Mục đích để dòng chữ cố định là sau này ta cho quảng cáo vào chỗ đó, khi người dùng cuộn xuống thì quảng cáo không bị cuộn theo.
Chú ý là ta buộc phải cho tất cả những cái cần cuộn vào trong một LinearLayout có hướng orientation là dọc, nếu không sẽ bị lỗi.
Để cuộn toàn bộ tất cả xuống, ta dùng Scroll trùm ra ngoài cùng, khi đó các dòng bên trên và dưới cùng của nó trông như sau:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
</ScrollView>
Ở trong phải là LinearLayout vertical.
Để cuộn ngang thì ta dùng horizol scroll view như sau
<HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true" >
</HorizontalScrollView>
Muốn vừa cuộn ngang lại cuộn dọc được thì ta phải lồng hai loại với nhau.
Để ví dụ, ta chọn ảnh to ngang hơn chiều ngang điện thoại, hoặc chỉnh chỉ số width lớn lên. Ta sửa trong xml thành.
<HorizontalScrollView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
  android:fillViewport="true" >
 <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:orientation="vertical" >  
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
 <LinearLayout
  android:layout_width="fill_parent"
 android:layout_height="wrap_content"
  android:orientation="vertical" >
  <ImageView
 android:id="@+id/img"
 android:layout_width="match_parent"
android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:contentDescription="@null"
 android:src="@drawable/abc" />
 <ImageView      
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:contentDescription="@null"
 android:src="@drawable/abc" />
 </LinearLayout>
 </ScrollView>
 </LinearLayout>
 </HorizontalScrollView>
Chạy thử để thấy cuộn ngang dọc đều được.


Ta cũng có thể cho một textView vào trong ScrollView để nếu nội dung dài quá thì có thể cuộn xuống ở riêng trong textView đó thôi, không cần cuộn tất cả giao diện xuống.

1 comment: