Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,801

HOME > Mobile > Mobile Forum > Android มาวิธีใช้ tabbed activity + The Navigation Drawer หน่อยครับ แนะนำที



 

Android มาวิธีใช้ tabbed activity + The Navigation Drawer หน่อยครับ แนะนำที

 



Topic : 126700



โพสกระทู้ ( 70 )
บทความ ( 0 )



สถานะออฟไลน์




กหดหกด
บอกวิธีเหมือนในรูปหน่อยครับ เวลาสร้าง Activity ใหม่แล้วอยากให้มันเป็น tabbed activity + The Navigation Drawer ยังไงครับ
หรือใครมีวิธีแบบไหนแนะนำทีครับ



Tag : Mobile, Android







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2017-03-06 01:16:08 By : tot14883 View : 2884 Reply : 6
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ใช้ Library ตัวนี้ครับ แจ๋มดี

Android Navigation Drawer

https://github.com/codepath/android_guides/wiki/Fragment-Navigation-Drawer







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-06 10:22:44 By : mr.win
 


 

No. 2



โพสกระทู้ ( 70 )
บทความ ( 0 )



สถานะออฟไลน์


ขอแบบเป็น Tabbed host ด้วยอ่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-06 20:50:46 By : tot14883
 

 

No. 3



โพสกระทู้ ( 157 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ลองศึกษาความเข้าใจก่อนนะครับ




[youtube]https://www.youtube.com/embed/oh7AaDHXCqM [/youtube]

https://www.youtube.com/watch?v=oh7AaDHXCqM

หากเข้าใจ แล้วลองดูตามนี้นะครับ



http://stackoverflow.com/questions/34917596/how-to-impliment-navigation-drawer-and-swipe-tab-in-same-activity-in-android-stu



เริ่มจาก สร้าง
1. Include the Design Support Library in your Module(app) dependencies.

Code (Android-Java)
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.1'
}


2. . สร้างไฟล์ new file drawermenu.xml in the Menu Directory under the Res folder.


Code (XML)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:title="Inbox"
          android:id="@+id/nav_item_inbox"
          android:icon="@drawable/inbox"/>

    <item android:title="Sent"
          android:id="@+id/nav_item_sent"
          android:icon="@drawable/sent"/>

    <item android:title="Drafts"
          android:id="@+id/nav_item_draft"
          android:icon="@drawable/draft"/>



    <item android:title="Others">
        <menu>
            <item
                android:title="Spam"
                android:icon="@drawable/spam"/>
            <item
                android:title="Bin"
                android:icon="@drawable/bin"/>
        </menu>
    </item>

    <group android:id="@+id/group_settings_id">

        <item android:title="Settings"
              android:icon="@drawable/settings"/>
        <item android:title="Help"
             android:icon="@drawable/help"/>
    </group>


</menu>




3. สร้าง colors and styles . colors.xml และ styles.xml

Code (XML)
styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/orange</item>
        <item name="colorPrimaryDark">@android:color/holo_orange_dark</item>
    </style>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>


    <color name="black">#000</color>
    <color name="orange">#FA0</color>
    <color name="white">#FFF</color>

</resources>



4. สร้าง activity-main.xml ตัวนึง

Code (XML)
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/orange"
        android:id="@+id/toolbar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="Drawer With Swipe Tabs" />

    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/drawerLayout"
        >



    <FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/containerView">
     </FrameLayout>



    <android.support.design.widget.NavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/shitstuff"
        app:itemTextColor="@color/black"
        app:menu="@menu/drawermenu"
        android:layout_marginTop="-24dp"
        />



    </android.support.v4.widget.DrawerLayout>
 </LinearLayout>



5. สร้าง layout file พร้อมรวมไปถึง tabLayout ให้เป็น ViewPager.

Code (XML)
tab_layout.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:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:background="@color/material_blue_grey_800"
        app:tabIndicatorColor="@color/orange"
        app:tabSelectedTextColor="@color/orange"
        app:tabTextColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>



6. สร้าง MainActivity.java เลย

Code (Android-Java)
MainActivity.java

package com.androidbelieve.drawerwithswipetabs;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity{
    DrawerLayout mDrawerLayout;
    NavigationView mNavigationView;
    FragmentManager mFragmentManager;
    FragmentTransaction mFragmentTransaction;

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

        /**
         *Setup the DrawerLayout and NavigationView
         */

             mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
             mNavigationView = (NavigationView) findViewById(R.id.shitstuff) ;

        /**
         * Lets inflate the very first fragment
         * Here , we are inflating the TabFragment as the first Fragment
         */

             mFragmentManager = getSupportFragmentManager();
             mFragmentTransaction = mFragmentManager.beginTransaction();
             mFragmentTransaction.replace(R.id.containerView,new TabFragment()).commit();
        /**
         * Setup click events on the Navigation View Items.
         */

             mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
             @Override
             public boolean onNavigationItemSelected(MenuItem menuItem) {
                mDrawerLayout.closeDrawers();



                 if (menuItem.getItemId() == R.id.nav_item_sent) {
                     FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
                     fragmentTransaction.replace(R.id.containerView,new
SentFragment()).commit();

                 }

                if (menuItem.getItemId() == R.id.nav_item_inbox) {
                    FragmentTransaction xfragmentTransaction = mFragmentManager.beginTransaction();
                    xfragmentTransaction.replace(R.id.containerView,new
TabFragment()).commit(); }

                 return false;
            }

        });

        /**
         * Setup Drawer Toggle of the Toolbar
         */

                android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
                ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout, toolbar,R.string.app_name,
                R.string.app_name);

                mDrawerLayout.setDrawerListener(mDrawerToggle);

                mDrawerToggle.syncState();

    }
}


7. เพิ่ม Tab Fragment File. โดยตั้งชื่อว่า TabFragment.java

Code (Android-Java)
TabFragment.java

package com.androidbelieve.drawerwithswipetabs;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TabFragment extends Fragment {

    public static TabLayout tabLayout;
    public static ViewPager viewPager;
    public static int int_items = 3 ;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /**
         *Inflate tab_layout and setup Views.
         */
            View x =  inflater.inflate(R.layout.tab_layout,null);
            tabLayout = (TabLayout) x.findViewById(R.id.tabs);
            viewPager = (ViewPager) x.findViewById(R.id.viewpager);

        /**
         *Set an Apater for the View Pager
         */
        viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        /**
         * Now , this is a workaround ,
         * The setupWithViewPager dose't works without the runnable .
         * Maybe a Support Library Bug .
         */

        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                    tabLayout.setupWithViewPager(viewPager);
                   }
        });

        return x;

    }

    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position)
        {
          switch (position){
              case 0 : return new PrimaryFragment();
              case 1 : return new SocialFragment();
              case 2 : return new UpdatesFragment();
          }
        return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */

        @Override
        public CharSequence getPageTitle(int position) {

            switch (position){
                case 0 :
                    return "Primary";
                case 1 :
                    return "Social";
                case 2 :
                    return "Updates";
            }
                return null;
        }
    }

}


8.สร้าง demo fragment file ไว้ใน TabLayout. โดยตั้งชื่อว่า PrimaryFragment.java


Code (Android-Java)
package com.androidbelieve.drawerwithswipetabs;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class PrimaryFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.primary_layout,null);
    }
}




9. สร้างไฟล์ primary_layout.xml

Code (XML)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:textSize="30sp"
        android:gravity="center"
        android:id="@+id/textView"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/holo_blue_dark"
        android:text="Primary\nFragment"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="web"
        android:textSize="15sp"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:text="androidbelieve.com"
        android:textColor="#000"
        android:layout_below="@+id/textView"
        android:textStyle="italic"/>

</RelativeLayout>


จากไม่เข้าใจ ลองศึกษาตาม ตัวอย่างได้ครับ

https://androidbelieve.com/


ประวัติการแก้ไข
2017-03-08 17:54:41
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-08 17:51:55 By : heloman
 


 

No. 4



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : heloman เมื่อวันที่ 2017-03-08 17:51:55
รายละเอียดของการตอบ ::
เยี่ยมเลยครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-09 09:02:52 By : mr.win
 


 

No. 5



โพสกระทู้ ( 157 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ตอบความคิดเห็นที่ : 4 เขียนโดย : mr.win เมื่อวันที่ 2017-03-09 09:02:52
รายละเอียดของการตอบ ::
ขอบคุณครับ @ ที่สอนนะครับ ก็ได้ความรู้จากท่านเนี้ยแหละครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-10 16:21:57 By : heloman
 


 

No. 6



โพสกระทู้ ( 70 )
บทความ ( 0 )



สถานะออฟไลน์


มันฟ้องยังงี้อ่ะครับ
ๆไำๆไ

กดปแ

ทำไงอ่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2017-03-30 22:54:56 By : tot14883
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : Android มาวิธีใช้ tabbed activity + The Navigation Drawer หน่อยครับ แนะนำที
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2021 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่