ViewFlipper CricleIndicator

KHOA CÔNG NGHỆ THÔNG TIN
HCMUTE
Slider Images
Nội dung
HCMUTE
2
 Slide Images with ViewFlipper

 Slide Images with ViewPager and Indicator
 Slide Images with ViewPager2 and Indicator3
 Slide Imgaes with SliderView
VB
LT
TT
CN
Lập Trình Di Động– ThS. Nguyễn Hữu Trung
1. Slide Images with ViewFlipper
HCMUTE
3
 Bước 1: Cấp quyền Internet

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
android:usesCleartextTraffic="true"
VB
LT
TT
CN
Slide Images with ViewFlipper
HCMUTE
4
 Bước 2: Thiết kế giao diện

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ViewFlipperActivity">
<ViewFlipper
android:id="@+id/viewFlipperMain"
android:layout_height="160dp"
VB
android:layout_marginStart="16dp"
android:layout_marginTop="8dp" LT
android:layout_marginEnd="16dp">
</ViewFlipper> TT
CN
</LinearLayout> Lập Trình Di Động– ThS. Nguyễn Hữu Trung
HCMUTE
5
 Bước 3: Tạo Animation
Slide_out_right.xml
VB
LT
TT
CN
HCMUTE
6
 Bước 4: Viết hàm ViewFlipper
VB
LT
TT
CN
2. Slide Images with CircleIndicator và
ViewPager HCMUTE
7
 Bước 1: Thêm thư viện CircleIndicator

https://github.com/ongakuer/CircleIndicator
implementation 'me.relex:circleindicator:2.1.6'
 Bước 2: Chuẩn bị hình bỏ vào thư mục drawable hoặc link ảnh
 Bước 3: Tạo model Images
VB
LT
TT
CN
Slide Images with CircleIndicator và
ViewPager HCMUTE
8
 Bước 4: Thiết kế giao diện activity_main.xml
 Bước 4: item_images.xml
VB
LT
TT
CN
ViewPager HCMUTE
9
 Bước 5: Tạo Adapter
VB
LT
TT
CN
ViewPager HCMUTE
10
 Bước 6: Viết hàm trong MainActivity.java
VB
LT
TT
CN
ViewPager HCMUTE
11
 Bước 7: Tự động chuyển ảnh Autorun CircleIndicator

 Khai báo Handler trên hàm onCreate() của MainActivity.java
VB
LT
TT
CN
ViewPager HCMUTE
12
 Bước 7: Autorun CircleIndicator

 Gọi Handler và lắng nghe viewpage trong hàm onCreate() của MainActivity.java
VB
LT
TT
CN
ViewPager HCMUTE
13
 Bước 7: Autorun CircleIndicator

 Thêm hàm onPause() và onResume() trong class MainActivity.java
VB
LT
TT
CN
Bài tập
HCMUTE
14
 Cho 02 Model sau:
 Hãy sử dụng ViewPager,

CricleIndicator và Retrofit
để lấy ảnh từ API server
sau hiển thị như hình http://app.iotstar.vn/appfoods/
VB
@FormUrlEncoded LT
@POST("newimagesmanager.php")
Call<MessageModel> LoadImageSlider(@Field("position") int position); TT
CN
3. Slide Images with CircleIndicator3 và
ViewPager2 HCMUTE
15
 Bước 1: Thêm thư viện và Thiết kế giao diện

https://github.com/ongakuer/CircleIndicator
implementation 'me.relex:circleindicator:2.1.6'
VB
LT
TT
CN
Slide Images with CircleIndicator3 và
ViewPager2 HCMUTE
16
 Bước 2: Chuẩn bị hình bỏ vào thư mục drawable hoặc link ảnh
 Bước 3: Tạo model Images
VB
LT
TT
CN
ViewPager2 HCMUTE
17
VB
LT
TT
CN
ViewPager2 HCMUTE
18
VB
LT
TT
CN
ViewPager2 HCMUTE
19
 Bước 5: Xử lý trong MainActivity.java
VB
LT
TT
CN
ViewPager2 HCMUTE
20
 Bước 6: AutoRun
VB
LT
TT
CN
ViewPager2 HCMUTE
21
VB
LT
TT
CN
ViewPager2 HCMUTE
22
VB
LT
TT
CN
4. Slide Images with SliderView
HCMUTE
23
 Bước 1: Thêm thư viện và thiết kế giao diện

 Bước 3: Viết code
VB
LT
TT
CN
HCMUTE
24

 Bước 3: Viết code
VB
LT
TT
CN
HCMUTE
25

//slider
implementation 'com.github.smarteist:autoimageslider:1.4.0'
Bổ sung hàm
jcenter() vào
VB
LT
TT
CN
HCMUTE
26

<com.smarteist.autoimageslider.SliderView
android:id="@+id/imageSlider"
android:layout_height="180dp"
app:sliderAnimationDuration="600"
app:sliderAutoCycleDirection="back_and_forth"
app:sliderAutoCycleEnabled="true"
app:sliderIndicatorAnimationDuration="600"
app:sliderIndicatorGravity="center_horizontal|bottom"
app:sliderIndicatorMargin="20dp"
app:sliderIndicatorOrientation="horizontal"
app:sliderIndicatorPadding="2dp" VB
app:sliderIndicatorRadius="1dp" LT
app:sliderScrollTimeInSec="3"
app:sliderStartAutoCycle="true"/> TT
CN
HCMUTE
27
VB
LT
TT
CN
HCMUTE
28
 Bước 3: Xử lý trong hàm onCreate() của MainActivity

Khai báo biến
toàn cục
Gọi Adapter, truyền dữ

liệu và xác lập thuộc
tính của sliderView
VB
LT
TT
CN
Thông tin liên lạc
HCMUTE
29
 Nguyễn Hữu Trung

 0908617108
 trungnh@hcmute.edu.vn
 utex.hcmute.edu.vn
VB
LT
TT
CN

ViewFlipper CricleIndicator

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ViewFlipper CricleIndicator

Uploaded by

Copyright:

Available Formats

KHOA CÔNG NGHỆ THÔNG TIN

 Slide Images with ViewFlipper

 Bước 1: Cấp quyền Internet

 Bước 2: Thiết kế giao diện

 Bước 3: Tạo Animation

 Bước 4: Viết hàm ViewFlipper

 Bước 1: Thêm thư viện CircleIndicator

 Bước 3: Tạo model Images

 Bước 4: Thiết kế giao diện activity_main.xml

 Bước 5: Tạo Adapter

 Bước 6: Viết hàm trong MainActivity.java

 Bước 7: Tự động chuyển ảnh Autorun CircleIndicator

 Bước 7: Autorun CircleIndicator

 Bước 7: Autorun CircleIndicator

 Cho 02 Model sau:

 Hãy sử dụng ViewPager,

 Bước 1: Thêm thư viện và Thiết kế giao diện

 Bước 3: Tạo model Images

 Bước 4: Tạo Adapter

 Bước 4: Tạo Adapter

 Bước 5: Xử lý trong MainActivity.java

 Bước 1: Thêm thư viện và thiết kế giao diện

 Bước 1: Thêm thư viện và thiết kế giao diện

 Bước 1: Thêm thư viện và thiết kế giao diện

 Bước 1: Thêm thư viện và thiết kế giao diện

 Bước 2: Tạo Adapter

 Bước 3: Xử lý trong hàm onCreate() của MainActivity

Gọi Adapter, truyền dữ

 Nguyễn Hữu Trung

You might also like