Android slide gaya Facebook

Aplikasi Facebook baru dan navigasinya sangat keren. Saya hanya mencoba melihat bagaimana itu dapat ditiru dalam aplikasi saya.

Adakah yang tahu bagaimana hal itu bisa dicapai?

Pada mengklik tombol kiri atas slide halaman dan layar berikut ditampilkan:

Video Youtube

Saya sudah pernah bermain dengan ini sendiri, dan cara terbaik yang bisa saya temukan adalah dengan menggunakan FrameLayout dan meletakkan HorizontalScrollView (HSV) khusus di atas menu. Di dalam HSV adalah Tampilan aplikasi Anda, tetapi ada Tampilan transparan sebagai anak pertama. Ini berarti, ketika HSV memiliki zero scroll offset, menu akan ditampilkan (dan masih dapat diklik secara mengejutkan).

Ketika aplikasi dimulai, kita gulir HSV ke offset tampilan aplikasi pertama yang terlihat, dan ketika kita ingin menunjukkan menu kita gulir kembali untuk mengungkapkan menu melalui tampilan transparan.

Kode ada di sini, dan dua tombol terbawah (disebut HorzScrollWithListMenu dan HorzScrollWithImageMenu) dalam aktivitas Launch menunjukkan menu terbaik yang bisa saya buat:

Demo menu geser Android

Tangkapan layar dari emulator (mid-scroll):

Tangkapan layar dari perangkat (gulir penuh). Perhatikan bahwa ikon saya tidak selebar ikon menu Facebook, sehingga tampilan menu dan tampilan 'aplikasi' tidak selaras.

Saya telah menerapkan navigasi slideout seperti facebook di proyek perpustakaan ini .

Anda dapat dengan mudah memasukkannya ke dalam aplikasi, UI, dan navigasi Anda. Anda hanya perlu menerapkan satu Kegiatan dan satu Fragmen, biarkan perpustakaan mengetahuinya - dan perpustakaan akan memberikan semua animasi dan navigasi yang diinginkan.

Di dalam repo Anda dapat menemukan proyek-demo, dengan cara menggunakan lib untuk mengimplementasikan navigasi seperti facebook. Ini adalah video pendek dengan catatan proyek demo .

Lib ini juga harus kompatibel dengan pola ActionBar ini, karena didasarkan pada transaksi Aktivitas dan TranslateAnimations (bukan transaksi Fragmen dan Tampilan kustom).

Saat ini, masalah terbesar adalah membuatnya berfungsi dengan baik untuk aplikasi, yang mendukung mode potret dan lansekap. Jika Anda memiliki umpan balik, berikan melalui github.

Semua yang terbaik,
Alex

Inilah lib lain dan tampaknya menjadi yang terbaik menurut saya. Saya tidak menulisnya ..

MEMPERBARUI:

Kode ini tampaknya bekerja paling baik untuk saya dan memindahkan seluruh Actionbar mirip dengan aplikasi G +.

Bagaimana Google bisa melakukan ini? Geser ActionBar di aplikasi Android

Saya pikir aplikasi facebook tidak ditulis dalam kode asli (dengan kode asli saya maksudkan, menggunakan tata letak di Android) tetapi mereka telah menggunakan tampilan web untuk itu dan telah menggunakan beberapa perpustakaan javascript ui seperti sencha . Itu dapat dengan mudah dicapai menggunakan kerangka sencha.

Ini adalah perpustakaan open source (sangat bagus) yang lain!

Fitur bagus tentang ini adalah ia mudah diintegrasikan dengan ActionBarSherlock.

Inilah tautan proyek github

Inilah tautan unduhan Google Play

Saya baru saja mengimplementasikan tampilan serupa untuk proyek saya sendiri. Anda bisa memeriksanya di sini

Berikut adalah layar contoh aplikasi berdasarkan perpustakaan yang saya tulis:

Mudah untuk menggunakan tampilan kustom ini sebagai elemen tata letak XML. Berikut ini contohnya:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

Saya Anda akan memiliki pertanyaan tentang penggunaan perpustakaan ActionsContentView. Saya dapat menulis artikel kecil di proyek Wiki.

Beberapa keuntungan dari perpustakaan ini:

• kemampuan untuk menggeser tampilan dengan sentuhan
• mudah untuk menyesuaikan ukuran bilah tindakan dalam XML
• mendukung semua versi Android SDK mulai dari 2.0 ke atas

Ada satu batasan:

• semua tampilan gulir horizontal tidak akan bekerja pada batas tampilan ini

Salam, Steven

Dengan revisi paket dukungan Android 13 (Mei 2013), ada DrawerLayout untuk membuat Drawer Navigasi yang dapat ditarik dari tepi jendela. Dan, laci navigasi adalah pola desain sekarang.

perpustakaan dukungan v4

pola desain laci navigasi

Melakukan pembulatan dari implementasi yang ada dan mengubahnya menjadi proyek perpustakaan plus aplikasi contoh. Juga menambahkan parsing XML serta deteksi otomatis dari actionbar yang mungkin ada, sehingga berfungsi dengan asli serta bilah tindakan dukungan seperti ActionBarSherlock.

Yang ini juga menghilangkan bilah tindakan!

Semuanya adalah proyek perpustakaan bersama dengan contoh aplikasi dan dijelaskan di Menu geser untuk Android seperti aplikasi google dan facebook . Berkat scirocco untuk ide dan kode awal!

Ini sederhana dan elegan: https://github.com/akotoe/android-slide-out-menu.git

Foto:

Saya pikir perpustakaan itu tidak disebutkan:

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

• berfungsi dengan baik dengan action bar ActionBarSherlock yang membantu dalam kompatibilitas mundur !
• Mendukung slide kanan dan tidak hanya slide melalui tombol!

Tidak dapat mengomentari jawaban yang diberikan oleh @Paul Grime, toh saya sudah mengirimkan proyek github-nya perbaikan untuk masalah flicker ....

Saya akan memposting perbaikannya di sini, mungkin seseorang membutuhkannya. Anda hanya perlu menambahkan dua baris kode. Yang pertama di bawah panggilan anim.setAnimationListener:

anim.setFillAfter(true);

Dan yang kedua setelah panggilan app.layout ():

app.clearAnimation();

Semoga ini membantu :)

Saya telah menerapkan ini dengan AbsoluteLayout dan pengendali slide sederhana yang memindahkan tampilan ke offset negatif untuk disembunyikan.

Jika ada yang tertarik, saya bisa membersihkan kode / tata letak dan posting. Saya tahu AbsoluteLayout sudah usang, tapi itu implementasi yang sangat mudah. Tampak Kiri / Tampak Kanan, dan ketika "meluncur terbuka", cukup gerakkan pandangan kiri keluar dari -X offset ke lebar perangkat - apa pun yang Anda ingin tunjukkan dari Tampilan Kanan.

Halo ini adalah contoh aplikasi demo terbaik yang menyediakan facebook seperti menu slide. Periksa kodenya di sini

Sebagai bagian dari Android Common Library (ACL) saya, saya mengimplementasikan SideBar sendiri. Keuntungan utama:

1. Bilah samping dapat diatur ke posisi apa pun: kiri, atas, bawah, kanan
2. Tampilan utama dan tampilan geser dapat diklik
3. Bilah samping dapat ditampilkan sebagian
4. Atribut yang dapat diubah untuk SideBar memudahkan untuk mengubah gaya itu
5. Artefak dalam repo pakar
6. Bagian dari perpustakaan besar

Kode sumber: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Penggunaan: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Baru-baru ini saya telah mengerjakan versi implementasi menu sliding saya. Ini menggunakan J.Feinstein Android library SlidingMenu populer.

Silakan periksa kode sumber di GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Unduh aplikasi langsung ke perangkat untuk mencoba:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

Kode harus jelas karena komentar. Saya harap ini akan membantu! ;)

Saya menemukan cara paling sederhana untuk itu dan cara kerjanya. Gunakan laci Navigasi sederhana dan panggil drawer.setdrawerListner () dan gunakan metode mainView.setX () pada metode drawerSlide di bawah atau salin kode saya.

file xml

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

file java

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

Terima kasih

Saya akan membuat beberapa tebakan berani di sini ...

Saya menganggap mereka memiliki tata letak yang mewakili menu yang tidak terlihat. Ketika tombol menu diketuk, mereka menghidupkan tata letak / tampilan di atas untuk menyingkir, dan cukup mengaktifkan visibilitas tata letak menu. Saya belum memikirkan hal ini yang menyebabkan masalah indeks-z dalam pandangan, atau bagaimana mereka mengendalikannya.

Android menambahkan laci navigasi. Lihat ini

tautan

Berikut ini adalah panduan desain dan pengembangan yang ditemukan dalam dokumentasi android resmi tidak perlu menambahkan perpustakaan eksternal tidak resmi. Hanya perpustakaan dukungan android yang akan melakukannya. Temukan tautan di sini.

desain dan pengembangan .

Aplikasi Facebook Android mungkin dibuat dengan Fragmen . Menu adalah satu Fragmen, Kegiatan mendalam (Newsfeed / Acara / Teman dll) adalah Fragmen lainnya. Pada dasarnya tata letak tablet 'master & detail' di ponsel.

Sebagai info, ketika pustaka kompatibilitas dimulai dengan 1.6 dan aplikasi facebook ini juga berjalan pada perangkat dengan Android 1.5, itu tidak dapat dilakukan dengan Fragmen.

Cara Anda dapat melakukannya, adalah: Buat aktivitas "base" BaseMenuActivity di mana Anda meletakkan semua logika untuk onItemClickListener untuk daftar menu Anda dan menentukan 2 animasi ("buka" dan "tutup"). Di akhir / awal animasi, Anda menunjukkan / menyembunyikan tata letak BaseMenuActivity (sebut saja menu_layout). Tata letak untuk aktivitas ini sederhana, hanya daftar dengan item + bagian transparan di kanan daftar Anda. Bagian ini akan dapat diklik dan lebarnya akan sama dengan "tombol pindahkan" Anda. Dengan itu, Anda dapat mengeklik tata letak ini untuk memulai animasi untuk membiarkan content_layout meluncur ke kiri dan mengambil seluruh layar. Untuk setiap opsi (yaitu item dari daftar menu), Anda membuat "ContentActivity" yang memperluas BaseMenuActivity. Kemudian ketika Anda mengklik pada item daftar, Anda memulai ItemSelectedContentActivity Anda dengan menu yang terlihat (yang akan Anda tutup segera setelah aktivitas Anda dimulai). Layout untuk setiap ContentActivity adalah FrameLayout dan termasuk dan. Anda hanya perlu memindahkan content_layout dan membuat menu_layout terlihat saat Anda inginkan.

Itu cara untuk melakukannya, dan saya harap saya sudah cukup jelas.

Saya telah bermain dengan ini beberapa hari terakhir dan saya datang dengan solusi yang cukup mudah pada akhirnya, dan yang berfungsi sebelum Honeycomb. Solusi saya adalah untuk menghidupkan Tampilan yang ingin saya geser ( FrameLayoutuntuk saya) dan mendengarkan akhir animasi (di mana titik untuk mengimbangi posisi kiri / kanan Tampilan). Saya telah menempelkan solusi saya di sini: Cara menganimasikan terjemahan Tampilan

Setelah mencari selama beberapa jam, saya menemukan solusi Paul Grime mungkin adalah yang terbaik. Tetapi memiliki terlalu banyak fungsi di dalamnya. Jadi mungkin sulit untuk belajar untuk pemula. Jadi saya ingin memberikan implementasi saya yang berasal dari ide Paul tetapi lebih sederhana dan harus mudah dibaca.

implementasi bilah menu samping dengan menggunakan kode java tanpa XML

Saya tidak melihat SimonVT / android-menudrawer luar biasa yang disebutkan di mana saja dalam jawaban di atas. Jadi, inilah tautannya

https://github.com/SimonVT/android-menudrawer

Sangat mudah digunakan dan Anda bisa meletakkannya di kiri, kanan, atas atau bawah. Sangat didokumentasikan dengan baik dengan kode sampel dan lisensi Apache 2.0.

Pada Juni 2012, Google telah menambahkan "templat" di plugin Eclipse ADT , dan ada templat yang disebut "master / detail flow" yang melakukan hal itu (berdasarkan pada fragmets)