随州便宜做网站,鸣蝉自助建站平台,阳江公司做网站,怎样创建网站根目录本文所有代码均位于https://github.com/MADMAX110/CatChat 之前使用过标签页布局可以让用户在应用中轻松地导航。 当只有为数不多地几个类别屏幕#xff0c;而且它们都在应用层次结构地同一级上#xff0c;标签页布局就很适用。 而抽屉导航可以实现更多选择#xff0c;这是一…本文所有代码均位于https://github.com/MADMAX110/CatChat 之前使用过标签页布局可以让用户在应用中轻松地导航。 当只有为数不多地几个类别屏幕而且它们都在应用层次结构地同一级上标签页布局就很适用。 而抽屉导航可以实现更多选择这是一个滑出式面板包含了应用其他部分地链接。这可以把链接分组为不同的区段。
一、新建一个Email应用
在这里新建一个email应用创建一个抽屉导航这个应用名为CatChat这个导航抽屉将包含一个头部和一组选项主要选项分别对应用户的收件箱草稿箱已发送邮件和废纸篓。这里还会为帮助和反馈选项包含一个单独的支持区段。 要实现一个导航抽屉需要向活动的布局增加一个抽屉布局这会定义一个可以打开和关闭的抽屉它需要包含两个视图一个对应主要内容一个对应抽屉内容。 主要步骤 1、为应用的内容创建基本片段和活动。 创建片段IndexFragment、DraftsFragments、SentItemsFragment和TrashFragment。 创建活动Helpactivity、FeedbackActivity。 2、创建抽屉的头部 抽屉头部布局为nav_header.xml包含一个图像和一些文本。 3、创建抽屉的选项 为抽屉要显示的选项建立一个菜单menu_nav.xml。 4、创建导航抽屉 将为应用的主活动增加这个导航抽屉让它显示头部和选项。然后编写活动代码控制抽屉的行为。
二、创建CatChat工程
如图创建新工程CatChat。 在carchat包中创建一个名为InboxFragment的新片段然后把它的布局名命名为fragment_inbox.xml。更新其中IndexFragment.java和fragment_inbox.xml的代码
package com.hafd.catchat;import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class InboxFragment extends Fragment {Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_inbox, container, false);}
}?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.InboxFragment!-- TODO: Update blank fragment layout --TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textinbox //LinearLayout创建DraftsFragment其布局名为fragment_drafts.xml
package com.hafd.catchat;import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class DraftsFragment extends Fragment {Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_inbox, container, false);}
}?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.DraftsFragment!-- TODO: Update blank fragment layout --TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textDrafts //FrameLayout创建SentItemsFragment
package com.hafd.catchat;import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class SentItemsFragment extends Fragment {Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_inbox, container, false);}
}?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.SentItemsFragment!-- TODO: Update blank fragment layout --TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textSent items //FrameLayout创建TrashFragment
package com.hafd.catchat;import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;public class TrashFragment extends Fragment {Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_inbox, container, false);}
}?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.TrashFragment!-- TODO: Update blank fragment layout --TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textTrash //FrameLayout三、创建一个工具条布局
在layou文件夹中新建一个名为toolbar_main的布局。
?xml version1.0 encodingutf-8?
androidx.appcompat.widget.Toolbarxmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeandroid:background?attr/colorPrimaryandroid:themestyle/ThemeOverlay.AppCompat.Dark.ActionBar/更新AndroidManifest.xml中的 android:themestyle/AppTheme 更新values文件夹中的colors.xml增加以下三个颜色 color namecolorPrimary#3F51B5/colorcolor namecolorPrimaryDark#303F9F/colorcolor namecolorAccent#FF4081/color更新应用的主题在values文件夹中创建一个Values resource file将文件命名为styles。
?xml version1.0 encodingutf-8?
resourcesstyle nameAppTheme parentTheme.AppCompat.Light.NoActionBaritem namecolorPrimarycolor/colorPrimary/itemitem namecolorPrimaryDarkcolor/colorPrimaryDark/itemitem namecolorAccentcolor/colorAccent/item/style
/resources四、创建活动
在catchat包中创建一个名为HelpActivity的活动其布局为activity_help。
?xml version1.0 encodingutf-8?
androidx.constraintlayout.widget.ConstraintLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.HelpActivityincludelayoutlayout/toolbar_mainandroid:idid/toolbar /TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textHelp//androidx.constraintlayout.widget.ConstraintLayoutpackage com.hafd.catchat;import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;import android.os.Bundle;public class HelpActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_help);Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);}
}同理在catchat包中创建一个名为FeedbackActivity的活动其布局为activity_feedback。
?xml version1.0 encodingutf-8?
androidx.constraintlayout.widget.ConstraintLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.FeedbackActivityincludelayoutlayout/toolbar_mainandroid:idid/toolbar /TextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textFeedback//androidx.constraintlayout.widget.ConstraintLayoutpackage com.hafd.catchat;import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;import android.os.Bundle;public class FeedbackActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_feedback);Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);}}五、创建导航抽屉
前面已经在工程中增加了需要的所有片段和活动导航抽屉中的选项将连接到这些片段和活动。接下来要创建导航抽屉本身。 导航抽屉本身将包含一个导航抽屉头部和一组选项 创建导航抽屉头部 在layout文件夹中新建一个名为nav_header的布局文件这个布局包含一个图像和两个文本视图。 将下面一张图片增加到drawable文件夹中 在string.xml中增加两个字符串资源 string nameapp_nameCatChat/stringstring nameuser_namespotcatchat.com/string下面是完整的nav_header.xml代码
?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_height180dpandroid:themestyle/ThemeOverlay.AppCompat.DarkImageViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:scaleTypecenterCropandroid:srcdrawable/kitten_small /LinearLayoutandroid:layout_widthwrap_contentandroid:layout_heightmatch_parentandroid:orientationverticalandroid:gravitybottom|startandroid:layout_margin16dp TextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textstring/app_nameandroid:textAppearancestyle/TextAppearance.AppCompat.Body1/TextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textstring/user_name//LinearLayout/FrameLayout导航抽屉从一个菜单资源文件得到它的选项列表。响应的代码与向应用条增加一组选项的代码是类似的。在res文件夹中创建一个menu文件夹在该文件夹中创建一个menu_nav.xml的菜单资源文件。 需要先在string.xml中增加一些字符串资源 string namenav_inboxMesagez/stringstring namenav_draftsDraftz/stringstring namenav_sentSent mesagez/stringstring namenav_trashIn da trash/stringstring namenav_supportSupport/stringstring namenav_helpHalp/stringstring namenav_feedbackGiv us feedback/string接下来就可以开始创建菜单资源文件了按你希望的显示顺序增加选项下面是完整的menu_nav.xml的代码。
?xml version1.0 encodingutf-8?
menu xmlns:androidhttp://schemas.android.com/apk/res/androidgroup android:checkableBehaviorsingleitemandroid:idid/nav_inboxandroid:iconandroid:drawable/sym_action_emailandroid:titlestring/nav_inbox/itemandroid:idid/nav_draftsandroid:iconandroid:drawable/ic_menu_editandroid:titlestring/nav_drafts/itemandroid:idid/nav_sentandroid:iconandroid:drawable/ic_menu_sendandroid:titlestring/nav_sent/itemandroid:idid/nav_trashandroid:iconandroid:drawable/ic_menu_deleteandroid:titlestring/nav_trash//groupitem android:titlestring/nav_supportmenuitemandroid:idid/nav_helpandroid:iconandroid:drawable/ic_menu_helpandroid:titlestring/nav_help/itemandroid:idid/nav_feedbackandroid:iconandroid:drawable/sym_action_emailandroid:titlestring/nav_feedback//menu/item
/menu向活动布局中增加一个抽屉布局作为它的根元素。这个抽屉布局需要包含两个内容一个包含活动内容的视图或视图组作为它的第一个元素以及一个定义抽屉的导航视图作为它的第二个元素。 完整的activity_main.xml代码
?xml version1.0 encodingutf-8?
androidx.drawerlayout.widget.DrawerLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:idid/drawer_layoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationvertical includelayoutlayout/toolbar_mainandroid:idid/toolbar /FrameLayoutandroid:idid/content_frameandroid:layout_heightmatch_parentandroid:layout_widthmatch_parent //LinearLayoutcom.google.android.material.navigation.NavigationViewandroid:idid/nav_viewandroid:layout_widthwrap_contentandroid:layout_heightmatch_parentandroid:layout_gravitystartapp:headerLayoutlayout/nav_headerapp:menumenu/menu_nav//androidx.drawerlayout.widget.DrawerLayout下面更新MainActivity
package com.hafd.catchat;import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;public class MainActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);Fragment fragment new InboxFragment();FragmentTransaction ft getSupportFragmentManager().beginTransaction();ft.add(R.id.content_frame, fragment);ft.commit();}
}六、增加抽屉开关
首先增加两个字符串资源来描述打开抽屉和关闭抽屉。 string namenav_open_drawerOpen navigation drawer/stringstring namenav_close_drawerClose navigation drawer/string完整的MainActivity
package com.hafd.catchat;import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;import android.content.Intent;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;import com.google.android.material.navigation.NavigationView;public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);//增加一个抽屉开关DrawerLayout drawer (DrawerLayout)findViewById(R.id.drawer_layout);ActionBarDrawerToggle toggle new ActionBarDrawerToggle(this, drawer, toolbar, R.string.nav_open_drawer, R.string.nav_close_drawer);drawer.addDrawerListener(toggle);toggle.syncState();//将活动注册为导航视图的一个监听器NavigationView navigationView (NavigationView)findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);Fragment fragment new InboxFragment();FragmentTransaction ft getSupportFragmentManager().beginTransaction();ft.add(R.id.content_frame, fragment);ft.commit();}//用户单击某一项时会调用这个方法Overridepublic boolean onNavigationItemSelected(NonNull MenuItem item) {int id item.getItemId();Fragment fragment null;Intent intent null;if (id R.id.nav_drafts)fragment new DraftsFragment();else if (id R.id.nav_sent)fragment new SentItemsFragment();else if (id R.id.nav_trash)fragment new TrashFragment();else if (id R.id.nav_help)intent new Intent(this, HelpActivity.class);else if (id R.id.nav_feedback)intent new Intent(this, FeedbackActivity.class);else fragment new InboxFragment();//根据用户在抽屉中选择的选项显示相应的片段和活动if (fragment ! null) {FragmentTransaction ft getSupportFragmentManager().beginTransaction();ft.replace(R.id.content_frame, fragment);ft.commit();}else startActivity(intent);DrawerLayout drawer (DrawerLayout) findViewById(R.id.drawer_layout);//用户单击某一项时关闭抽屉drawer.closeDrawer(GravityCompat.START);return true;}//后退时关闭抽屉Overridepublic void onBackPressed() {DrawerLayout drawer (DrawerLayout)findViewById(R.id.drawer_layout);if (drawer.isDrawerOpen(GravityCompat.START))drawer.closeDrawer(GravityCompat.START);else super.onBackPressed();}
}试一试
