Android (네번째 수업 - Glide , Ratingbar)

---

Android - Glide , Ratingbar

1. Glide

1. 2014년에 공개된 이미지 로딩 라이브러리이다.

2. ImageView 에 이미지 로딩때 사용되는 라이브러리이다.

3. 이미지 URL을 로드해서 보여줄수있다.

---

일단 Glide 도 하나의 라이브러리 이기때문에

먼저 다른 라이브러리들 처럼 Gradle 에 dependencies 에 등록해줍니다.

dependencies { 
    implementation 'com.github.bumptech.glide:glide:4.7.1'
}

자 이렇게 glide 를 추가해줬으면

이제 glide 를 어떻게 사용하는지에 대해 알아보도록 하자.

---

glide를 먼저 사용하기전에 

load할 사진의

 이미지주소 를 추가해줘야하는데

values폴더에 string.xml 파일안에

<string name="url">이미지주소 넣어주세요</string>

이렇게 load 할 url 을 추가 시켜줘야한다.

---

먼저 xml 코드를 보자

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="320dp"
        android:layout_height="200dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:src="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />
 
</android.support.constraint.ConstraintLayout>

ConstraintLayout 을 사용했습니다.

먼저 이미지 를 로드할 <ImageView/> 을 만들어줍니다.

여기서 새로운점은 background 대신 src 속성을 줬다는겁니다.

이제 자바 코드를 봅시다.

---

Java code

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;


import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private String url;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
        loadImage();
    }

    private void init(){
        imageView = findViewById(R.id.imageView);
        url = getResources().getString(R.string.url);

    }
    private void loadImage(){
        Glide.with(this).load(url).into(imageView);
    }
}

이 코드를 해석해 보자면 

ImageView 변수랑 url 변수를 만들어 준다.

그리고 imageView 의 id 찾아주는 , 그리고 url 을 url 변수안에 넣어주는

init메서드를 정의하고

이미지를 imageView에 띄어줄 

loadImage 메서드를 정의해주는데

Glide.with(this).load(url).into(imageView);

이소스를 해석하자면 

이클래스 안에 서 .load(url) 안 에들어가는 

인자를 로드해오는데요

인자에 아까 정의해둔 url 을 불러온뒤

.into() 안에 인자는어디로 띄어줄가를 정하는겁니다.

그럼 결론적으로 아까 정의해둔 url이 이미지뷰에 로드 되는걸 볼수있는

그런 이미지 로딩 라이브러리가 glide 입니다.

---

2. Ratingbar

Ratingbar 는 별점을 줄때 많이 사용하는

위젯입니다.

먼저 사용법을 알아보자.

xml 코드

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="242dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="268dp"
        android:layout_marginTop="8dp"
        android:max="5"
        android:rating="0"
        android:stepSize="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />


</android.support.constraint.ConstraintLayout>

 ConstraintLayout를 사용한 xml 코드

먼저 구현하는 방법은 간단하다 

<Ratingbar/> 의 xml 특성을 보자면

 android:max="5"
 android:rating="0"
 android:stepSize="1"

max // 레이팅의 최고 수치를 뜻합니다 (실제 값)

rating // 최초 시작지 즉 별의 시작지를 뜻합니다.

stepSize // 별의 움직임 단위를 뜻합니다.

좀더 알고싶다면

 https://developer.android.com/reference/android/widget/RatingBar

에서 찾아 볼수 있습니다.

java 코드

private void setListeners(){
    ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
        @Override
        public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
            Toast.makeText(getApplicationContext(), Float.toString(rating),Toast.LENGTH_SHORT).show();
        }
    });
}

이렇게 Ratingbar 사용법에 대해 알아봤다.

---

방학이끝나간다 끝나기전에 좀더 열심히 공부하자.