第一个Android App:
一直想入android这个坑,但一直因为各种原因拖到了现在,今天终于下定决心迈出了第一步。由于公司一直没有android的项目。所以也没有现成的设计和切图,这对于一个刚入坑的人来说真的挺痛苦的,后来实在没办法,就想到了我平时看小说的软件。经历各种办法终于从apk中拿到了切图。下面就开始吧,走起!
目标:
不要想多,今天只是实现底部导航栏的点击切换。
1. 首先将页面的布局写好,这里不多说了。直接上代码。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/home_bg_shape" >
<RelativeLayout
android:id="@+id/bookshelf_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/home_bookshelf_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon_home_tab_bookshelf_n" />
<TextView
android:id="@+id/home_bookshelf_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/bookshelf"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/searchbook_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/home_searchbook_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon_home_tab_searchbook_n" />
<TextView
android:id="@+id/searchbook_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/free"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/bookstore_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/home_bookstore_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon_home_tab_bookstore_n" />
<TextView
android:id="@+id/bookstore_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/bookstore"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/writer_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/writer_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon_home_tab_writer_n" />
<TextView
android:id="@+id/writer_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/writer"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/me_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/me_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_horizontal"
android:src="@drawable/icon_home_tab_me_n" />
<TextView
android:id="@+id/me_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/me"
android:textColor="#82858b" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
我们运行一下:
![这里写图片描述](https://img-blog.csdn.net/20170728194215737?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFpZHVfMzc4MzI5NDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
效果已经出来了,下面我们就为每个按钮创建一个对应的Fragment:
先创建5个layout文件
bookshelf_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="@string/bookshelf"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
searchbook_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="@string/free"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
bookstore_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="@string/bookstore"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
writer_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="@string/writer"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
me_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="10dp"
android:text="@string/me"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>
在创建对应的Fragment 类
BookShelfFragment
package com.example.xxxx.anytravel.fragment;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.xxxx.anytravel.R;
public class BookShelfFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View bookshelfLayout = inflater.inflate(R.layout.bookshelf_layout,
container, false);
return bookshelfLayout;
}
}
SearchBookFragment
package com.example.xxxx.anytravel.fragment;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.xxxx.anytravel.R;
public class SearchBookFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View searchBookLayout = inflater.inflate(R.layout.searchbook_layout, container,
false);
return searchBookLayout;
}
}
BooKStoreFragment
package com.example.xxxx.anytravel.fragment;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.xxxx.anytravel.R;
public class BooKStoreFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View bookstoreLayout = inflater.inflate(R.layout.bookstore_layout,
container, false);
return bookstoreLayout;
}
}
WriteFragment
package com.example.xxxx.anytravel.fragment;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.pengq.anytravel.R;
public class WriteFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View writeLayout = inflater.inflate(R.layout.writer_layout,
container, false);
return writeLayout;
}
}
MeFragment
package com.example.xxxx.anytravel.fragment;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.pengq.anytravel.R;
public class MeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View meLayout = inflater.inflate(R.layout.me_layout,
container, false);
return meLayout;
}
}
好了,到了这里准备工作已经完成下面只要实现按钮的点击事件并且加载对应的页面即可;
package com.example.xxxx.anytravel.activity
import android.app.FragmentManager
import android.app.FragmentTransaction
import android.graphics.Color
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.example.pengq.anytravel.R
import com.example.pengq.anytravel.fragment.BooKStoreFragment
import com.example.pengq.anytravel.fragment.BookShelfFragment
import com.example.pengq.anytravel.fragment.MeFragment
import com.example.pengq.anytravel.fragment.SearchBookFragment
import com.example.pengq.anytravel.fragment.WriteFragment
import java.util.ArrayList
import java.util.List
public class MainActivity extends BaseActivity implements View.OnClickListener {
private BookShelfFragment bookShelfFragment
private BooKStoreFragment booKStoreFragment
private SearchBookFragment searchBookFragment
private WriteFragment writeFragment
private MeFragment meFragment
private List<View> bottomTabs
private View bookshelfLayout
private View searchBookLayout
private View bookStoreLayout
private View writerLayout
private View meLayout
private ImageView bookshelfImage
private ImageView searchbookImage
private ImageView bookstoreImage
private ImageView writerImage
private ImageView meImage
private TextView bookshelfText
private TextView searchBookText
private TextView bookStoreText
private TextView writerText
private TextView meText
private FragmentManager fragmentManager
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
if (getSupportActionBar() != null) {
getSupportActionBar().hide()
}
setContentView(R.layout.activity_main)
initViews()
fragmentManager = getFragmentManager()
setSelectTab(0)
}
private void initViews() {
bookshelfLayout = findViewById(R.id.bookshelf_layout)
searchBookLayout = findViewById(R.id.searchbook_layout)
bookStoreLayout = findViewById(R.id.bookstore_layout)
writerLayout = findViewById(R.id.writer_layout)
meLayout = findViewById(R.id.me_layout)
bookshelfImage = (ImageView) findViewById(R.id.home_bookshelf_image)
searchbookImage = (ImageView) findViewById(R.id.home_searchbook_image)
bookstoreImage = (ImageView) findViewById(R.id.home_bookstore_image)
writerImage = (ImageView) findViewById(R.id.writer_image)
meImage = (ImageView) findViewById(R.id.me_image)
bookshelfText = (TextView) findViewById(R.id.home_bookshelf_text)
searchBookText = (TextView) findViewById(R.id.searchbook_text)
bookStoreText = (TextView) findViewById(R.id.bookstore_text)
writerText = (TextView) findViewById(R.id.writer_text)
meText = (TextView) findViewById(R.id.me_text)
bookshelfLayout.setOnClickListener(this)
searchBookLayout.setOnClickListener(this)
bookStoreLayout.setOnClickListener(this)
writerLayout.setOnClickListener(this)
meLayout.setOnClickListener(this)
bottomTabs = new ArrayList<>(5)
bottomTabs.add(bookshelfLayout)
bottomTabs.add(searchBookLayout)
bottomTabs.add(bookStoreLayout)
bottomTabs.add(writerLayout)
bottomTabs.add(meLayout)
}
private void setSelectTab(int index) {
clearSelection()
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction()
// 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况
hideFragments(transaction)
switch (index) {
case 0:
bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_p)
bookshelfText.setTextColor(Color.parseColor("#00c98d"))
if (bookShelfFragment == null) {
bookShelfFragment = new BookShelfFragment()
transaction.add(R.id.content, bookShelfFragment)
} else {
transaction.show(bookShelfFragment)
}
break
case 1:
searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_p)
searchBookText.setTextColor(Color.parseColor("#00c98d"))
if (searchBookFragment == null) {
searchBookFragment = new SearchBookFragment()
transaction.add(R.id.content, searchBookFragment)
} else {
transaction.show(searchBookFragment)
}
break
case 2:
bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_p)
bookStoreText.setTextColor(Color.parseColor("#00c98d"))
if (booKStoreFragment == null) {
booKStoreFragment = new BooKStoreFragment()
transaction.add(R.id.content, booKStoreFragment)
} else {
transaction.show(booKStoreFragment)
}
break
case 3:
writerImage.setImageResource(R.drawable.icon_home_tab_writer_p)
writerText.setTextColor(Color.parseColor("#00c98d"))
if (writeFragment == null) {
writeFragment = new WriteFragment()
transaction.add(R.id.content, writeFragment)
} else {
transaction.show(writeFragment)
}
break
case 4:
meImage.setImageResource(R.drawable.icon_home_tab_me_p)
meText.setTextColor(Color.parseColor("#00c98d"))
if (meFragment == null) {
meFragment = new MeFragment()
transaction.add(R.id.content, meFragment)
} else {
transaction.show(meFragment)
}
break
default:
break
}
transaction.commit()
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.bookshelf_layout:
setSelectTab(0)
break
case R.id.searchbook_layout:
setSelectTab(1)
break
case R.id.bookstore_layout:
setSelectTab(2)
break
case R.id.writer_layout:
setSelectTab(3)
break
case R.id.me_layout:
setSelectTab(4)
break
default:
break
}
}
private void clearSelection() {
bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_n)
bookshelfText.setTextColor(Color.parseColor("#82858b"))
searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_n)
searchBookText.setTextColor(Color.parseColor("#82858b"))
bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_n)
bookStoreText.setTextColor(Color.parseColor("#82858b"))
writerImage.setImageResource(R.drawable.icon_home_tab_writer_n)
writerText.setTextColor(Color.parseColor("#82858b"))
meImage.setImageResource(R.drawable.icon_home_tab_me_n)
meText.setTextColor(Color.parseColor("#82858b"))
}
private void hideFragments(FragmentTransaction transaction) {
if (bookShelfFragment != null) {
transaction.hide(bookShelfFragment)
}
if (searchBookFragment != null) {
transaction.hide(searchBookFragment)
}
if (booKStoreFragment != null) {
transaction.hide(booKStoreFragment)
}
if (writeFragment != null) {
transaction.hide(writeFragment)
}
if (meFragment != null) {
transaction.hide(meFragment)
}
}
}
好,上图(原谅我不会动图)
![这里写图片描述](https://img-blog.csdn.net/20170728200041065?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFpZHVfMzc4MzI5NDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)