Soru Android'de ekranın altından ortalarına bir diyalog slayt nasıl yapılır


Animasyonla aktivitem hakkında bir diyalog göstermek istiyorum. Diyaloğum, faaliyetin alt kısmından faaliyetin ortasına kayıyor.

/****Düzenle****/

Sorduğum için üzgünüm, belirsiz. Diyaloğumun alttan ortaya kaydırılacağı, ancak diyalogun alt kısmının, aşağıdaki resimdeki gibi aktivitenin alt tarafına yerleştirileceği anlamına geliyor.enter image description here


57
2018-02-16 04:30


Menşei


Şuna baksana github.com/Ali-Rezaei/SlidingDrawer Bu da herhangi bir taraftan birkaç satır kodla kaymayı mümkün kılıyor. - Ali
bir örnek görmüyorum, bir düzen xml verdiniz ama kodda nasıl kullanılır? lütfen bir örnek verebilir misin? - kuldeep


Cevaplar:


Bunun için 2 animasyona ihtiyacınız var ve bunu res / anim klasörüne koyunuz

  1. 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" />

Artık style.xml'de özel bir stil oluşturmanız gerekiyor

<style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
        <item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>

Sonraki, aynı style.xml'deki android Theme.Dialog temasını genişletmek ve oluşturduğumuz özel stile referans vermek.

<!-- Animation for dialog box -->
    <style name="DialogSlideAnim" parent="@android:style/Theme.Dialog">
        <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
    </style>

Ve son olarak, böyle bir diyalog oluşturduğunuzda bu stili çağırınız.

dialog = new Dialog(new ContextThemeWrapper(this, R.style.DialogSlideAnim));

yeap .... Şimdi Dialog kaydırmaya hazır ..... !!

Güncelleştirme:

@MichealP'nin önerdiği gibi, bu pencere alttaki

getWindow().setGravity(Gravity.BOTTOM); 

ve tizliği ve arka planı kaldırmak için stili değiştirin

<item name="android:windowBackground">@null</item> 
<item name="android:windowFrame">@null</item> 
<item name="android:windowNoTitle">true</item>

@ Sikni8'in önerdiği gibi bu siyah kenarlığı şeffaf yapacak

getWindow().setBackgroundDrawableResource(android.R.color.transparent);

150
2018-02-16 04:51



getWindow () öğesini ekledim. setGravity (Gravity.BOTTOM); ve <item name = "android: windowBackground"> ​​@ null </ item> <öğe adı = "android: windowFrame"> @ null </ item> <öğe adı = "android: windowNoTitle"> true </ item> Ve sonra istediğim gibi çalışıyor - MichaelP
@MichaelP Is benim için alttan gelmiyor. Sadece grow_from_middle gibi animasyon başlıyor ama ekranın alt kısmında. Özlediğim bir şey var. - abhishek
Ayrıca kullanabilirsiniz getWindow().setBackgroundDrawableResource(android.R.color.transparent); Siyah kenarlığı çalışma zamanında şeffaf yapmak. - Si8
Merhaba @arunsoorya, Ben Dialog animasyon canlandırmak için senin çözüm uyguladı ama sonra "Android Action Bar Stil Jeneratör" dosyaları ve oluşturulan Temayı oluşturdu ve şimdi Stil Dialog oluşturmak için kullanılan "hintDialog = new Dialog (c, R) style.DialogSlideAnim);" diyaloğu şeffaf bir arka plan ile gösteriyor .. ne düzeltmeliyim? Teşekkürler :) - newton_guima
Appcompat-v7 kullanıyorsanız, iki animasyon xml dosyasına ihtiyacınız yoktur. @ Anim / slide_up_dialog yerine @ anim / abc_slide_in_bottom kullanın. @ Anim / slide_out_down kullanarak yerine @ anim / abc_slide_out_bottom kullanabilirsiniz. - Bernd S


Bütün cevapları burada denedim ve benim için çalışmıyor. Bütün bu cevapların uzun zaman önce yazıldığını biliyorum. O halde nasıl çalıştığımı göstereyim.   Bu makaleyi takip ettim.

Kısacası : res / anim / slide_up.xml oluştur

<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>

daha sonra, res / anim / slide_bottom.xml dosyasını oluşturun.

<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>

Ardından res / values ​​/ styles.xml dosyasına bir stil ekleyin

<style name="DialogAnimation">
    <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
    <item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>

Şimdi bu animasyon stilini, aşağıdaki gibi iletişim kutunuza veya alertdialog kutusuna ayarlayabilirsiniz.

Dialog dialog = new Dialog(this);
dialog.getWindow().getAttributes().windowAnimations = animationSource;

Veya,

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);

Sadece iletişim kutuları için örnek gösterdim, ancak daha önce de söylediğim gibi, bu yöntemi uyarı iletişim kutuları için de kullanabilirsiniz.


4
2017-07-08 13:29





alt Sayfaları kullanabilirsiniz. Bu konuda biraz durdum.

Android Destek Kitaplığı 23.2 ile Google, Alt Sayfalar için destek duyurdu. Materyal Tasarımına göre, Alt Sayfalar, yalnızca daha fazla içeriği ortaya çıkarmak için kullanılan, kullanıcı tarafından başlatılan bir eylemin sonucu olarak görüntülenen öğelerdir.

İki ana alt sayfa türü vardır:

Modal alt tabakalar Menülere veya basit diyaloglara alternatifler. Diğer uygulamalardan derin bağlantılı içerik de sunabilirler. Bunlar öncelikle mobil cihazlar içindir.

Kalıcı alt tabakalar uygulama içi içerik mevcut

Basit bir örnek var

Android'de bir BottomSheet yapmak oldukça kolaydır, sadece bir CoordinatorLayout Düzeninizin ana öğesi olarak ve bir görünüm için bir Alt Sayfa davranışı iliştirin.

1 adım - 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 adım - bottom_sheet.xml dosyasını ekleyin

<?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 adım - MainAktivitenizi şu şekilde yapın:

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");
    }
}
}

4
2018-02-07 12:21





Gösterirken iletişim kutusunu canlandırmanın en kolay yolu

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();
    }

});

Buna ek olarak, alttan hareket ederken diyalog arka planını tam ekran ve saydam hale getirin

Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
window.setBackgroundDrawableResource(android.R.color.transparent);

1
2017-12-10 08:34





Arunsoorya'nın cevabına ek olarak:

Değişiklik 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" />

Ve 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"/>

0
2018-05-29 10:25





Kullanabilirsiniz Modal Alt Sayfa (referans).

  1. Tasarım destek kütüphanesini ekle

    implementation "com.android.support:design:$version_support"
    
  2. Oluşturmak Fragment bu uzanır BottomSheetDialogFragment ve geçersiz kıl onCreateView

    class 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)
        }
    }
    
  3. İletişim kutusunu göster

    val dialog = BottomDialogFragment.newInstance()
    dialog.show(supportFragmentManager, BottomDialogFragment::class.java.simpleName)
    

0
2017-07-20 00:02