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

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

代码如下:

public class CallLogsFragment extends Fragment{

private ListView vList;

private CallPanelView vDial;

private TextView vShowDial;

private CallListAdapter mAdapter;

private Animation mDialHidAnim;

private Animation mDialShowAnim;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// TODO Auto-generated method stub

View root = inflater.inflate(R.layout.activity_calls_list_screen, null);

vList = (ListView) root.findViewById(R.id.activity_call_list_lv);

vShowDial = (TextView) root.findViewById(R.id.activity_call_show_dial);

vDial = (CallPanelView) root.findViewById(R.id.dial_panel_view);

return root;

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onActivityCreated(savedInstanceState);

prepareResourceAndData();

bindView();

}

@Override

public void onResume() {

// TODO Auto-generated method stub

super.onResume();

mAdapter.setCallNumbers(CallCache.getInstance().getCallNumbers());

}

private void prepareResourceAndData() {

mAdapter = new CallListAdapter(getActivity());

mDialHidAnim = AnimationUtils.loadAnimation(getActivity().getApplicationContext(),

R.anim.dial_panel_hidden);

mDialHidAnim.setAnimationListener(new AnimationListener() {

public void onAnimationStart(Animation animation) {}

public void onAnimationRepeat(Animation animation) {}

public void onAnimationEnd(Animation animation) {

// End

vShowDial.setVisibility(View.VISIBLE);

vDial.setVisibility(View.GONE);

}

});

mDialShowAnim =
AnimationUtils.loadAnimation(getActivity().getApplicationContext(),

R.anim.dial_panel_show);

mDialShowAnim.setAnimationListener(new AnimationListener() {

public void onAnimationStart(Animation animation) {}

public void onAnimationRepeat(Animation animation) {}

public void onAnimationEnd(Animation animation) {

// End

vShowDial.setVisibility(View.GONE);

}

});

}

private void bindView() {

vList.setAdapter(mAdapter);

vList.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

// TODO Auto-generated method stub

CallItemView itemview = (CallItemView) view;

itemview.toggleExpand();

hidDialPanel(true);

}

});

vList.setOnScrollListener(new OnScrollListener() {

public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {}

@Override

public void onScrollStateChanged(AbsListView view, int scrollState) {

// TODO Auto-generated method stub

if (scrollState == OnScrollListener.SCROLL_STATE_TOUCH_SCROLL) {

hidDialPanel(false);

}

}

});

vDial.setPanelAnim(mDialShowAnim, mDialHidAnim);

vShowDial.setVisibility(View.GONE);

vShowDial.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

vDial.show();

}

});

}

private void hidDialPanel(boolean anim) {

if (vDial.getVisibility() == View.VISIBLE) {

if(anim){

vDial.dismiss();

}else{

vDial.setVisibility(View.GONE);

vShowDial.setVisibility(View.VISIBLE);

}

}

}

}

}

2.布局修改成,增加ViewPager,去掉原有的容器framelayout:

<?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" >

<android.support.v4.view.ViewPager

android:id="@+id/door_viewpager_content_vp"

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>

3.V4 support 包里面已经帮我们写好了 FragmentPagerAdapter,看源码可以知道在 PageAdapter.instantiateItem中,有:

Fragment fragment = mFragmentManager.findFragmentByTag(name);

if (fragment != null) {

if (DEBUG) Log.v(TAG, "Attaching item #" + itemId + ": f=" + fragment);

mCurTransaction.attach(fragment);

} else {

fragment = getItem(position);

if (DEBUG) Log.v(TAG, "Adding item #" + itemId + ": f=" + fragment);

mCurTransaction.add(container.getId(), fragment,

makeFragmentName(container.getId(), itemId));

}

可以看出 ViewPager在添加fragment 的时候先在FragmentManager里面找有没有,如果没有就会去请求PageAdapter.getItem(position)来生成fragment,进行添加,因此我们只要重写FragmentPagerAdapter并实现getItem方法就可以了,代码如下:

class FragmentAdapter extends FragmentPagerAdapter{

public FragmentAdapter(FragmentManager fm) {

super(fm);

// TODO Auto-generated constructor stub

}

@Override

public Fragment getItem(int position) {

// TODO Auto-generated method stub

return getPagerFragmentByPosition(position);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return 2;

}

}private Fragment getPagerFragmentByPosition(int position){

if(position == FRAG_INDEX_CALL_LOG){

return new CallLogsFragment();

}

if(position == FRAG_INDEX_SMS){

return new SMSListFragment();

}

return null;

}

4.页面完整代码:

public class DoorFragmentActivity extends FragmentActivity{

public static final String FRAG_SMS = "sms_list_frag";

public static final String FRAG_TEXT = "text_frag";

public static final int FRAG_INDEX_CALL_LOG = 0;

public static final int FRAG_INDEX_SMS = 1;

private Fragment mTextFragment;

private FragmentManager mFragMgr;

private ViewPager vViewPager;

private Button mMenuBtn;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.door_fragment_activity_layout);

initFragments();

bindViews();

}

private void bindViews(){

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

mMenuBtn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

showOutFragments(FRAG_TEXT, true);

}

});

vViewPager = (ViewPager) findViewById(R.id.door_viewpager_content_vp);

vViewPager.setAdapter(new FragmentAdapter(mFragMgr));

}

private void initFragments(){

mFragMgr = getSupportFragmentManager();

TextFragment textfrag = new TextFragment();

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

mTextFragment = textfrag;

}

private void showOutFragments(String tag, boolean needback){

FragmentTransaction trans = mFragMgr.beginTransaction();

trans.setCustomAnimations(R.anim.frag_enter,

R.anim.frag_exit);

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

if(needback){

trans.addToBackStack(tag);

}

trans.commit();

}

private Fragment getFragmentByTag(String tag){

if(FRAG_TEXT.equals(tag)){

return mTextFragment;

}

return null;

}

private Fragment getPagerFragmentByPosition(int position){

if(position == FRAG_INDEX_CALL_LOG){

return new CallLogsFragment();

}

if(position == FRAG_INDEX_SMS){

return new SMSListFragment();

}

return null;

}

class FragmentAdapter extends FragmentPagerAdapter{

public FragmentAdapter(FragmentManager fm) {

super(fm);

// TODO Auto-generated constructor stub

}

@Override

public Fragment getItem(int position) {

// TODO Auto-generated method stub

return getPagerFragmentByPosition(position);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return 2;

}

}

}

}

时间: 2024-10-04 05:00:41

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

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

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

移动端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设计开发必须考虑适配大.中.小三种屏幕.所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么