XSuperMES移动端运用FragmentActivity适配大屏幕(一)

XSuperMES移动端运用FragmentActivity适配大屏幕

XSuperMES移动端运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视。针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套app,然后拷贝一份,修改布局以适应什么超级大屏的。难道无法做到一个app可以同时适应手机和平板吗?答案是,当然有,那就是Fragment.Fragment出现的初衷就是为了解决这样的问题。

你可以把Fragment当成Activity一个界面的一部分,甚至Activity的界面由完全不同的Fragment组成,更帅气的是Fragment有自己的声明周期和接收、处理用户的事件,这样就不必要在一个Activity里面写一堆事件、控件的代码了。更为重要的是,你可以动态的添加、替换、移除某个Fragment。

1、如何使用fragment activity

要想用Fragment 功能必须先让activity继承FragmentActivity,其原因是里面包含了Fragment运作的FragmentManager接口的实现类 FragmentManagerImpl ,由这个类管理所有Fragment的显示、隐藏

1.使用最简单的Fragment,我们只要继承Fragment就可以

public class TextFragment extends Fragment{

private String mMsg;

public void setMessage(String message){

this.mMsg = message;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// TODO Auto-generated method stub

final Context context = getActivity();

FrameLayout root = new FrameLayout(context);

root.setBackgroundColor(Color.YELLOW);

TextView tv = new TextView(context);

tv.setText(mMsg);

tv.setGravity(Gravity.CENTER);

root.addView(tv, new FrameLayout.LayoutParams(

ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));

return root;

}

}

首先Fragment 就可以把它当作一个view , 只不过这个view 与 activity一样有了生命周期函数

Fragment.onCreateView() 函数就是用于生成这个Fragment布局的view的,类似baseadapter.getView()

这样一个包含一个TextView的简单布局就完成了。

2.重写我们自己的FragmentActivity.

这里面主要要通过FragmentManager 来进行Fragment的添加和删除:

public class TextFragment extends Fragment{

private String mMsg;

public void setMessage(String message){

this.mMsg = message;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// TODO Auto-generated method stub

final Context context = getActivity();

FrameLayout root = new FrameLayout(context);

root.setBackgroundColor(Color.YELLOW);

TextView tv = new TextView(context);

tv.setText(mMsg);

tv.setGravity(Gravity.CENTER);

root.addView(tv, new FrameLayout.LayoutParams(

ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));

return root;

}

}

首先Fragment 就可以把它当作一个view , 只不过这个view 与 activity一样有了生命周期函数

public class DoorFragmentActivity extends FragmentActivity{

public static final String FRAG_SMS = "sms_list_frag";

public static final String FRAG_TEXT = "text_frag";

private Fragment mSMSFragment;

private Fragment mTextFragment;

private FragmentManager mFragMgr;

private Button mMenuBtn;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.door_fragment_activity_layout);

mFragMgr = getSupportFragmentManager();

mMenuBtn = (Button) findViewById(R.id.door_menu_btn);

mMenuBtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

showFragments(FRAG_TEXT, true);

}

});

mMenuBtn.setOnLongClickListener(new OnLongClickListener() {

@Override

public boolean onLongClick(View v) {

// TODO Auto-generated method stub

return false;

}

});

initFragments();

showFragments(FRAG_SMS, false);

}

private void initFragments(){

mSMSFragment = new SMSListFragment();

TextFragment textfrag = new TextFragment();

textfrag.setMessage("这是 菜单界面");

mTextFragment = textfrag;

}

private void showFragments(String tag, boolean needback){

FragmentTransaction trans = mFragMgr.beginTransaction();

if(needback){

trans.setCustomAnimations(R.anim.frag_enter,

R.anim.frag_exit);

trans.add(R.id.door_root_content_fl, getFragmentByTag(tag), tag);

trans.addToBackStack(tag);

}else{

trans.replace(R.id.door_contents_fl, getFragmentByTag(tag), tag);

}

trans.commit();

}

private Fragment getFragmentByTag(String tag){

if(FRAG_SMS.equals(tag)){

return mSMSFragment;

}

if(FRAG_TEXT.equals(tag)){

return mTextFragment;

}

return null;

}

}

  • 首先我们获取FragmentManager实现:直接调用 FragmentActivity.getSupportFragmentManager(),看源码可以知道这返回的是FragmentManager内部定义的实现类FragmentManagerImpl。
  • 我们获取了FragmentManagerImpl后我们其实不咋操作这个类,只调用FragmentManager.beginTransation(),这个获取FragmentTransation接口的实现类(里面具体是BackStackRecord类的实例),我们关于Fragment的所有操作都是通过它来完成的,因为没仔细研究,我只了解直接自己在代码里面定义Fragment而没有在xml里面写(xml写觉得有点别扭)

我们主要通过 FragmentTransation的一些方法来处理Fragment的:

1) trans.add(fragment, tag);  这个实际是 containerViewId = 0 调用的3)
2) trans.add(containerViewId, fragment);  这个实际是 tag = null 调用的 3)
3) trans.add(containerViewId, fragment, tag);  如果containerViewId != 0实际上调用的是获取到

fragment的 onCreateView方法返回的view 并加入到containerViewId这个viewgroup中去即                  viewgroup.addView(fragment.onCreateView());

未解决问题:containerViewId = 0 的时候代表什么??

4) trans.replace(containerViewId, fragment)  一样是null tag调用 5)
5) trans.replace(containerViewId, fragment, tag)  这个一样是添加一个fragment到对应的container中去,只不过比add多了一步对相同containerViewId中已有的fragment检索,进行removeFragment操作,再去添加这个新来的fragment

6) trans.addToBackStack(tag); 如果你的fragment对于back键有类似activity的回退响应,就要记得把它加入到里面去,trans里面模拟了栈,但是我的回退没有响应我设置的exit anim 这个无语还没解决

3.再使用下ListFragment,我这里写的是SMSListFragment继承了ListFragment:

public class SMSListFragment extends ListFragment{

private ConversationListAdapter mAdapter;

private ConversationQuery mQuery;

private long startTime;

@Override

public void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

mAdapter = new ConversationListAdapter(getActivity());

mQuery = new ConversationQuery(getActivity().getContentResolver());

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onActivityCreated(savedInstanceState);

setListAdapter(mAdapter);

}

@Override

public void onStart() {

// TODO Auto-generated method stub

super.onStart();

startAsyncQuery();

}

@Override

public void onStop() {

// TODO Auto-generated method stub

super.onStop();

mAdapter.getCursor().close();

mAdapter.changeCursor(null);

}

public void startAsyncQuery() {

startTime = System.currentTimeMillis();

mQuery.startQuery(1, null, Conversation.sAllThreadsUri,

Conversation.ALL_THREADS_PROJECTION, null, null,

Conversation.CONVERSATION_ORDER);

}

private final class ConversationQuery extends AsyncQueryHandler {

public ConversationQuery(ContentResolver cr) {

super(cr);

// TODO Auto-generated constructor stub

}

@Override

protected void onQueryComplete(int token, Object cookie, Cursor cursor) {

// TODO Auto-generated method stub

System.out.println("conversation cursor size : "

+ cursor.getCount());

mAdapter.changeCursor(cursor);

Toast.makeText(     getActivity(),

"查询短信会话个数:" + cursor.getCount() + ",花费"

+ (System.currentTimeMillis() - startTime) + " ms",

Toast.LENGTH_LONG).show();

}

}

}

代码中可以知道和使用普通的ListActivity完全没区别,

onCreate()中完成自己要一次性初始的东西,我在里面主要是初始化一个adapter和一个对sms数据库的查询

在onActivityCreated()中将adapter设置给listview,这个不确定有没有更好的位置,

然后进入我们熟悉的生命周期方法:

onStart()中,开启查询

onStop()中,我们界面已经不在显示了,所以我们不关心数据库变化了,close cursor

4.主页面的布局文件:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/door_root_content_fl"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<FrameLayout

android:id="@+id/door_contents_fl"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="55dp"

android:orientation="horizontal" >

<Button

android:id="@+id/door_menu_btn"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="菜单" />

</LinearLayout>

</LinearLayout>

</FrameLayout>

时间: 2024-10-19 03:14:01

XSuperMES移动端运用FragmentActivity适配大屏幕(一)的相关文章

XSuperMES移动端运用FragmentActivity适配大屏幕(二)

今天继续完成剩下的学习部分,现在项目很多地方使用viewpager来提供滑动,今天记录学习viewpager配合fragment的显示,增加一个CallLogsFragment配合之前SMSListFragment1.CallLogsFragment,主要显示手机的电话记录,这都是之前的代码,所以只要把Activity转换成Fragment就可以了,也一样, Activity.setContentView(int) 转变成Fragment.onCreateView(View) 并且 findVi

移动端rem.js适配屏幕

九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多说,今天就来谈谈移动端的rem适配...本文将从rem是什么.为什么要用rem适配.怎么用rem来讲解,保证浅显易懂... 1.什么是rem rem(font size of the root element)是指相对于根元素(<html>)的字体大小的单位.简单的说它就是一个相对单位.看到rem

关于移动端页面的适配

移动端页面: 适配,适应各个不同的设备,如果是纯粹的移动端页面的话不用去考虑ipad,PC. 浏览器,微信(朋友圈),QQ(内置浏览器),UC 小米,华为会有部分兼容问题. 响应式: 必须共享一套html结构,样式不同而已,通过设备的分辨率来自动去切换样式 只适用于简单页面:博客,新闻,简单的公司门户: viewport 一般默认手机网页采用980px的宽,不设viewport就默认980: <meta name="viewport" content="width=de

淘宝——移动端页面终端适配

注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小

移动端界面的适配

阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点. 所以今天做一个移动端页面适配的小小总结 回到顶部 适配的要求 1.在不同分辨率的手机上,页面看起来是自适应的

再聊移动端页面的适配

再聊移动端页面的适配 https://www.w3cplus.com/css/vw-for-layout.html  原文网址 Flexible承载的使命 Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值: <!-- dpr = 1--> <meta name=

移动端高清适配方案(解决图片模糊问题、1px细线问题)

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但

移动端iPhone系列适配问题

问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉 问题二:表单input元素获取焦点时页面被放大的解决办法 原因:在iPhone上点击input框会有一个动画效果,这是苹果公司默认设置的,每次input获取焦点都会使页面放大,效果非常不好看,经过多方百度寻求到

淘宝内部的兼容大屏幕iPhone设计流程

移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿.随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是来了,移动设计全面进入“杂屏”时代.看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了. 加上Android生态中纷繁复杂的各种奇葩尺寸,现在APP设计开发必须考虑适配大.中.小三种屏幕.所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么