달달한 스토리

728x90
반응형

 

주말을 보내고 다시 빡세게 코딩 준비중이다.

 

오늘 잠시 로딩창을 간단하게 구현하기 위해

 

구글링을 하면서 알게 된 사실들을 적어본다.

 

andro-jinu.tistory.com/entry/androidstudio2

 

[안드로이드 스튜디오] 로딩창 구현 (ProgressBar)

이번 포스팅에서는 커스텀 프로그레스바를 만들텐데 대기시간이 필요할때 주로 사용되는 로딩창을 프로그레스바로 구현해보도록 하겠습니다. 먼저 새로운 프로젝트를 생성합니다. 템플릿은

andro-jinu.tistory.com

출처를 밝힙니다!


로딩창 만들기

 

public class ProgressDialog extends Dialog
{
    public ProgressDialog(Context context)
    {
        super(context);
        // 다이얼 로그 제목을 안보이게...
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.dialog_progress);
    }
}

 

우선 다이얼로그 클래스를 하나 만들어 줍니다.

 

동시에 보여줄 로딩화면 로고도 만들어줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dp"
    android:background="@drawable/progress_bg" >
    <ProgressBar
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:indeterminateDrawable="@drawable/progress_image" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Loading..."
        android:textStyle="bold"
        android:textColor="@android:color/white"
        android:textSize="16dp" />
</LinearLayout>

 

프로그레스바와 리니어레이아웃에 @drawable/progress_bg와 @drawable/progress_image를

 

만들어야합니다!

 

먼저 @drawable/progress_image입니다.

 

애니메이션 액션을 줌으로써, 로딩중일때 로고가 돌아가게 할 수 있습니다!

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher_foreground"
    android:pivotX="50%"
    android:pivotY="50%">
</animated-rotate>

 

그 다음은  @drawable/progress_bg입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#22ffffff"/>
    <corners android:radius="12dp"/>
    <stroke android:color="#22ffffff" android:width="1dp"/>
</shape>

 

레이아웃 겉에 실선을 넣어주어 시각적으로 보기 좋게합니다.

 

그리고 MainActivity에 코드를 입력해줍니다.

 

public class MainActivity extends AppCompatActivity
{
    ProgressDialog customProgressDialog;

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

        Button btnLoad = findViewById(R.id.btnload);

        //로딩창 객체 생성
        customProgressDialog = new ProgressDialog(this);
        //로딩창을 투명하게
        customProgressDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

        btnLoad.setOnClickListener(new Button.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                // 로딩창 보여주기
                customProgressDialog.show();
            }
        });
    }
}

 

그리고 버튼을 참조하여 리스너를 넣어줍니다.

 

activity_main.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">

    <Button
        android:id="@+id/btnload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_gravity="center"
        android:text="Loading!!!"/>
</LinearLayout>

 

이렇게 하면 로딩창이 구현이 완료됩니다!!

 

로딩창을 끄시려면

 

주변을 클릭하거나 뒤로 가기를 누르시면 됩니다.

 

원하는 지점에서

 

Dialog.cancel() 메서드를 호출하시면 됩니다.

 

 

그리고 주변을 터치할 때 화면이 꺼지게 하지 않는 속성입니다.

 

Dialog.setCanceledOnTouchOutside(false); //주변터치 방지

 

그리고 또 하나는 뒤로가기를 눌러도 꺼지지 않는 다이얼로그 속성입니다.

 

dialog.setCancelable(false); //뒤로가기 방지

 

오늘은 여기까지 입니다.

 

다들 빡코딩하세요!

 

https://github.com/qjsqjsaos/Loading

 

qjsqjsaos/Loading

로딩창 구현하기. Contribute to qjsqjsaos/Loading development by creating an account on GitHub.

github.com

 

728x90
반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading