반응형
Android에서 화면 하단에서 중간으로 대화 슬라이드를 만드는 방법
내 활동에 대한 대화를 애니메이션으로 표시하고 싶습니다. 내 대화 상자가 활동 하단에서 활동 중간으로 이동합니다.
/****편집하다****/
질문이 명확하지 않아서 죄송합니다. 내 대화는 아래에서 중간으로 슬라이드되지만 대화의 아래쪽은 다음 그림과 같이 활동의 아래쪽에 배치됩니다.
이를 위해서는 2 개의 애니메이션이 필요하고 이것을 res / anim 폴더에 넣습니다.
- slide_up_dialog.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="50%p" android:toYDelta="0%p" android:duration="@android:integer/config_longAnimTime"/>
2.slide_out_down.xml
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="@android:integer/config_longAnimTime" android:fromYDelta="0%p" android:toYDelta="100%p" />
이제 style.xml에서 사용자 정의 스타일을 만들어야합니다.
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
<item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>
다음은 안드로이드 테마를 확장하는 것입니다. 동일한 style.xml에있는 대화 테마를 만들고 우리가 만든 사용자 지정 스타일에 대한 참조를 제공합니다.
<!-- Animation for dialog box -->
<style name="DialogSlideAnim" parent="@android:style/Theme.Dialog">
<item name="android:windowAnimationStyle">@style/DialogAnimation</item>
</style>
마지막으로 다음과 같은 대화 상자를 만들 때이 스타일을 호출합니다.
dialog = new Dialog(new ContextThemeWrapper(this, R.style.DialogSlideAnim));
예 ... 이제 대화창을 슬라이드 할 준비가되었습니다 ..... !!
최신 정보:
@MichealP가 제안했듯이 이것은 하단에 창을 배치합니다
getWindow().setGravity(Gravity.BOTTOM);
스타일을 수정하여 제목과 배경을 제거합니다.
<item name="android:windowBackground">@null</item>
<item name="android:windowFrame">@null</item>
<item name="android:windowNoTitle">true</item>
@ sikni8이 제안했듯이 검은 색 테두리를 투명하게 만듭니다.
getWindow().setBackgroundDrawableResource(android.R.color.transparent);
여기에서 모든 답변을 시도했지만 작동하지 않습니다. 나는 답변이 오래전에 쓰여졌다는 것을 알고 있습니다. 그래서 어떻게 작동하는지 보여 드리겠습니다. 나는이 기사를 따랐다.
요컨대 : res / anim / slide_up.xml 생성
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="100%"
android:interpolator="@android:anim/accelerate_interpolator"
android:toYDelta="0">
</translate>
</set>
그런 다음 res / anim / slide_bottom.xml을 만듭니다.
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="@android:integer/config_mediumAnimTime"
android:fromYDelta="0%p"
android:interpolator="@android:anim/accelerate_interpolator"
android:toYDelta="100%p">
</translate>
</set>
그런 다음 res / values / styles.xml에 스타일을 추가합니다.
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
<item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>
이제이 애니메이션 스타일을 아래와 같이 대화 상자 또는 경고 대화 상자에 설정할 수 있습니다.
Dialog dialog = new Dialog(this);
dialog.getWindow().getAttributes().windowAnimations = animationSource;
또는,
Dialog dialog = new Dialog(this);
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(dialog.getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
lp.gravity = Gravity.BOTTOM;
lp.windowAnimations = R.style.DialogAnimation;
dialog.getWindow().setAttributes(lp);
대화 상자에 대한 예제 만 보여 주었지만 앞서 말했듯이 경고 대화 상자에도이 방법을 사용할 수 있습니다.
하단 시트를 사용할 수 있습니다. 나는 그것에 대해 약간의 정보를 넣었다.
Android 지원 라이브러리 23.2를 통해 Google은 하단 시트에 대한 지원을 발표했습니다. 머티리얼 디자인에 따르면 하단 시트는 사용자가 시작한 작업의 결과로만 표시되는 요소이며 더 많은 콘텐츠를 표시하는 데 사용됩니다.
하단 시트에는 두 가지 주요 유형이 있습니다.
모달 하단 시트 는 메뉴 또는 간단한 대화 상자의 대안입니다. 또한 다른 앱에서 딥 링크 된 콘텐츠를 제공 할 수도 있습니다. 주로 모바일 용입니다.
인앱 콘텐츠를 제공하는 지속적인 하단 시트
간단한 예가 있습니다
Android에서 BottomSheet를 만드는 것은 매우 쉽습니다. CoordinatorLayout 을 레이아웃의 주요 요소로 사용하고 BottomSheet 동작을 뷰에 연결하기 만하면됩니다.
1 단계 -activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:background="#ffffff">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<Button
android:id="@+id/btnButtonSheet"
android:text="Camera"
android:textColor="#1e1e1e"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- Adding bottom sheet after main content -->
<include layout="@layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>
2 단계 -bottom_sheet.xml 추가
<?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"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Select your options!"
android:gravity="center"
android:textColor="#1e1e1e"
android:textSize="16dp"
android:layout_margin="8dp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="@+id/btnPhoto"
android:text="Photo"
android:textColor="#1e1e1e"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnCamera"
android:text="Camera"
android:textColor="#1e1e1e"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnCancel"
android:text="Cancel"
android:background="#a2a2a3"
android:textColor="#1e1e1e"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
3 단계 -MainActivity를 다음과 같이 만드십시오.
public class MainActivity extends AppCompatActivity {
@BindView(R.id.btnButtonSheet)
Button btnBottomSheet;
@BindView(R.id.bottom_sheet)
LinearLayout layoutBottomSheet;
BottomSheetBehavior sheetBehavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
sheetBehavior = BottomSheetBehavior.from(layoutBottomSheet);
sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState) {
case BottomSheetBehavior.STATE_HIDDEN:
break;
case BottomSheetBehavior.STATE_EXPANDED: {
btnBottomSheet.setText("Close");
}
break;
case BottomSheetBehavior.STATE_COLLAPSED: {
btnBottomSheet.setText("Expand");
}
break;
case BottomSheetBehavior.STATE_DRAGGING:
break;
case BottomSheetBehavior.STATE_SETTLING:
break;
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
}
@OnClick(R.id.btnButtonSheet)
public void toggleBottomSheet() {
if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
btnBottomSheet.setText("Close Bottom sheet");
} else {
sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
btnBottomSheet.setText("Expand Bottom sheet");
}
}
}
모달 하단 시트 ( 참조 )를 사용할 수 있습니다 .
디자인 지원 라이브러리 추가
implementation "com.android.support:design:$version_support"Fragment확장BottomSheetDialogFragment하고 재정의 하는 만들기onCreateViewclass BottomDialogFragment : BottomSheetDialogFragment() { companion object { fun newInstance() = BottomDialogFragment() } override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.dialog_layout, container) } }대화 표시
val dialog = BottomDialogFragment.newInstance() dialog.show(supportFragmentManager, BottomDialogFragment::class.java.simpleName)
다음은 표시 할 때 대화 상자를 애니메이션하는 가장 간단한 방법입니다.
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
@Override
public void onShow(DialogInterface dialogInterface) {
View view = dialog.getWindow().getDecorView();
//for enter from left
//ObjectAnimator.ofFloat(view, "translationX", -view.getWidth(), 0.0f).start();
//for enter from bottom
ObjectAnimator.ofFloat(view, "translationY", view.getHeight(), 0.0f).start();
}
});
또한 하단에서 애니메이션 할 때 대화 상자 배경을 전체 화면으로 투명하게 만듭니다.
Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
window.setBackgroundDrawableResource(android.R.color.transparent);
arunsoorya의 답변 외에도 :
slide_up_dialog.xml 변경
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:fromYDelta="0%p"
android:toYDelta="100%p" />
그리고 slide_out_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%p"
android:toYDelta="50%p"
android:duration="@android:integer/config_longAnimTime"/>
새로운 머티리얼 디자인 라이브러리는 정확한 모양과 더 쉬운 구현을 위해 BottomSheetDialog 를 제공합니다.
반응형
'Program Tip' 카테고리의 다른 글
| Android SDK 2.3 및 ADT 8.0으로 업그레이드 한 후 "프로젝트 용 시스템 라이브러리를 가져올 수 없습니다" (0) | 2020.11.19 |
|---|---|
| Python을 사용하여 파일을 비우는 방법 (0) | 2020.11.19 |
| Objective-C 객체 배열에서 쉼표로 구분 된 문자열을 만드는 가장 간단한 방법 (0) | 2020.11.19 |
| 폴더의 여러 파일 이름 변경, 접두사 추가 (Windows) (0) | 2020.11.19 |
| 툴바 탐색 아이콘이 설정되지 않음 (0) | 2020.11.19 |