android之小熊天气(2)界面粗略布局
本次主要实现类似墨迹天气的底部导航按钮，虽然不知道墨迹天气底部怎么来实现的；但还是实现了其类似的效果；而实现方式就是底部五个ImageButton,当单击之后更换相应的背景图片；每个按钮触发的OnClickListener事件更换Activity主题的内容；而装内容则通过五个Fragment来实现；效果图如下：
源码如下
欢迎界面
package com.android.xiong.Welcom;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import com.android.xiong.xiongweather.MainActivity;
import com.android.xiong.xiongweather.R;
//欢迎界面
public class StartWelcomeActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcom_activity);
new Timer().schedule(new TimerTask() {
@Override
public void run() {
// 定义进入主界面的Intent
Intent intent = new Intent(StartWelcomeActivity.this,
MainActivity.class);
startActivity(intent);
StartWelcomeActivity.this.finish();
}
}, 800);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@drawable/welcom1"
android:orientation="vertical" >
<TextView
android:id="@+id/txt_webcomle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#ffffff"
android:text="@string/hello_world"/>
<TextView
android:id="@+id/txt_webcomle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textColor="#ffffff"/>
</LinearLayout>
主界面
package com.android.xiong.xiongweather;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
public class MainActivity extends Activity {
private ImageButton imgbt_tianqi, imgbt_qushi, imgbt_shijing,
imgbt_shenghuo, imgbt_gengduo;
private int[] imagebtid = { R.id.imagebt_tianqi, R.id.imagebt_qushi,
R.id.imagebt_shijing, R.id.imagebt_shenghuo, R.id.imagebt_gengduo };
private int[] imagebt1 = { R.drawable.tianqi1, R.drawable.qushi1,
R.drawable.shijing1, R.drawable.shenghuo1, R.drawable.gengduo1 };
private int[] imagebt2 = { R.drawable.tianqi2, R.drawable.qushi2,
R.drawable.shijing2, R.drawable.shenghuo2, R.drawable.gengduo2 };
Fragment skyFragment = new SkyFragment();
Fragment trendFragment = new TrendFragment();
Fragment wheFragment = new WhenFragment();
Fragment moreFragment = new MoreFragment();
Fragment lifeFragment = new LifeFragment();
RelativeLayout contairs;
// 被替换组件的ID
private int viewIds = R.id.contairs;
private int ids = 0;
// 初始化界面
public void InitView() {
imgbt_tianqi = (ImageButton) findViewById(R.id.imagebt_tianqi);
imgbt_qushi = (ImageButton) findViewById(R.id.imagebt_qushi);
imgbt_shijing = (ImageButton) findViewById(R.id.imagebt_shijing);
imgbt_shenghuo = (ImageButton) findViewById(R.id.imagebt_shenghuo);
imgbt_gengduo = (ImageButton) findViewById(R.id.imagebt_gengduo);
DisplayMetrics disp = getResources().getDisplayMetrics();
// 获取屏幕的宽度
int width = disp.widthPixels;
// 每个ImageView的宽度
int image_width = width / 5;
imgbt_tianqi.getLayoutParams().width = image_width;
imgbt_qushi.getLayoutParams().width = image_width;
imgbt_shijing.getLayoutParams().width = image_width;
imgbt_shenghuo.getLayoutParams().width = image_width;
imgbt_gengduo.getLayoutParams().width = image_width;
ImageButtonClick clike = new ImageButtonClick();
imgbt_tianqi.setOnClickListener(clike);
imgbt_qushi.setOnClickListener(clike);
imgbt_shijing.setOnClickListener(clike);
imgbt_shenghuo.setOnClickListener(clike);
imgbt_gengduo.setOnClickListener(clike);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mains);
InitView();
// 隐藏ActionBar
getActionBar().hide();
changeContent(skyFragment, null, viewIds);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
new MainActivity.ImageButtonClick().changeImageSorce(imgbt_tianqi);
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
// 更换主题内容
/**
*
* @param fragment
* Fragment对象
* @param bundle
* 与activity传递的数据
* @param id
* 被替换view的组件id
*/
public void changeContent(Fragment fragment, Bundle bundle, int id) {
// 向fragment传递参数
fragment.setArguments(bundle);
// 获取FragmentTransaction对象
FragmentTransaction transaction = getFragmentManager()
.beginTransaction();
// 替换组件
transaction.replace(id, fragment);
// 提交事务
transaction.commit();
}
// ImageButton单击事件
class ImageButtonClick implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
changeImageSorce(v);
}
// 改变底部导航的ImageButton的背景图片与主体内容
public void changeImageSorce(View v) {
// 获取v控件在imagebtid数组的索引
int index = index(imagebtid, v.getId());
for (int i = 0; i < imagebtid.length; i++) {
if (i != index) {
((ImageButton) findViewById(imagebtid[i]))
.setBackgroundResource(imagebt2[i]);
} else {
((ImageButton) findViewById(imagebtid[i]))
.setBackgroundResource(imagebt1[i]);
}
}
switch (index) {
case 0:
if (ids != 0) {
changeContent(skyFragment, null, viewIds);
ids = 0;
}
break;
case 1:
if (ids != 1) {
changeContent(trendFragment, null, viewIds);
ids = 1;
}
break;
case 2:
if (ids != 2) {
changeContent(wheFragment, null, viewIds);
ids = 2;
}
break;
case 3:
if (ids != 3) {
changeContent(lifeFragment, null, viewIds);
ids = 3;
}
break;
case 4:
if (ids != 4) {
changeContent(moreFragment, null, viewIds);
ids = 4;
}
break;
default:
break;
}
}
// 根据ImageButton 的id找出相对应索引
public int index(int[] args, int arg) {
int i = 0;
for (; i < args.length; i++) {
if (args[i] == arg) {
break;
}
}
return i;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rel1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/linersq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/imagebt_tianqi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tianqi1" />
<ImageButton
android:id="@+id/imagebt_qushi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/qushi2" />
<ImageButton
android:id="@+id/imagebt_shijing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shijing2" />
<ImageButton
android:id="@+id/imagebt_shenghuo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shenghuo2" />
<ImageButton
android:id="@+id/imagebt_gengduo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/gengduo2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/linersq"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:id="@+id/contairs"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
主题Frament内容
package com.android.xiong.xiongweather;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView.FindListener;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class SkyFragment extends Fragment {
private static final String JIEMIAN = "jiemian";
LinearLayout linearSky;
@Override
public void onCreate(Bundle savedInstanceState) {
// 加载sky_fragment文件
linearSky = (LinearLayout) getActivity().getLayoutInflater().inflate(
R.layout.sky_fragment, null);
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return linearSky;
}
// 根据天气和时间来更换界面背景图片
public int ImageDrawableID(double water) {
return 1;
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linerSky1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/skybk" >
<Button
android:id="@+id/chioCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chioCity"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/skybk"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/skybk"/>
</LinearLayout>
