I am designing an cross-platform app for iOS aswell Android with a shared logic using MVVMCross (5.1.1).
Throughout my app I have a fixed toolbar at the top displaying the current view's title aswell a button. Below the bar the interface is changing from view to view
The Android part:
On Android I created a reuseable layout which I embed in my current layout using include.
In my portable project I have a BaseViewModel which has the properties the reuseable toolbar layout binds to. Every other ViewModel derives from this base class. This way I can have all bindable properties of a displayed screen in one ViewModel without the need of nesting but see for yourself:
activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_login" />
<RelativeLayout
android:id="#+id/parentLoginLayout"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
app:MvxBind="Text Pin"
/>
</RelativeLayout>
</RelativeLayout>
toolbar_login.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:minWidth="25px"
android:minHeight="25px">
<TextView
app:MvxBind="Click ToolbarMenuCommand"
/>
<!-- some other -->
</android.support.v7.widget.Toolbar>
ViewModels.cs
using System.Threading.Tasks;
using Mobile.Helpers;
using ViewModels.Base;
using MvvmCross.Core.Navigation;
using MvvmCross.Core.ViewModels;
using Plugin.MessageBox;
namespace Mobile.ViewModels
{
public abstract class BaseViewModel : MvxViewModel
{
protected void NavigateToMainView()
{
NavigateTo<MainViewModel>();
}
private readonly IMvxNavigationService _navigationService;
protected BaseViewModel(IMvxNavigationService navigationService)
{
_navigationService = navigationService;
}
public IMvxCommand ToolbarMenuCommand => new MvxCommand(OnMenuButtonClick);
protected abstract void OnMenuButtonClick();
}
public class LoginViewModel : BaseViewModel
{
private bool _menuVisibility;
private string _pin;
public LoginViewModel(IMvxNavigationService navigationService) : base(navigationService)
{
}
public bool MenuVisibility
{
get => _menuVisibility;
set => SetProperty(ref _menuVisibility, value);
}
public string Pin
{
get => _pin;
set => SetProperty(ref _pin, value);
}
protected override void OnMenuButtonClick()
{
MenuVisibility = !MenuVisibility;
}
}
}
The iOS part:
I am not entirely sure how to realise above behavior on iOS. I hope someone has a good idea or a good example project for me which I can take a look at. In general it is no problem to refactorise the ViewModels incase my idea is just not possible at iOS.
A few facts about the iOS project:
I am not using storyboards but single .xib's being independent
from each other
In my .xib's files I use autolayout constraints for positioning and
sizing entirely
A few ideas I already had (cant test them right now):
1. idea:
Create a base .xib with the above bar, the constraints aswell the
outlets
Create each new xib Design based on the previously created file
This would mean I need to adjust every view incase I decide to change something about the toolbar but so far I found no other way to embed a .xib in another .xib without having two different ViewControllers. Also I read that inheritance cause problems with outlets.
2. idea
Each .xib has an empty view at the top which acts as a container for
the toolbar
Have a Base ViewController which constructs the toolbar from code and
adds it as a child to the container view, and binds the properties
from the BaseViewModel
In a previous iOS project I noticed that adding views to the layout can cause problems with autolayout. Probably also a not that good solution?
3. idea
Create a xib with the toolbar and a container below and use it as a master page which would probably mean having a MasterViewModel with the toolbar properties and a nested ChildViewModel.
This is probably the way to go but I have to admit that I have no clue what is the best way to approach it (stil pretty new to iOS and MVVMCross).
Does someone have a few useful hints for me? Thanks a lot!
From what I understood I think you should try to use ScrollView for iOS part and try to imitate the ViewPager's behavior from Android, an example.
Related
I have been over the documentation here:
https://developer.android.com/guide/topics/ui/settings
The above page talks about creating a settings UI in your app, and shows using an XML file (that it doesn't tell you where to put by the way).
I do not want to add a settings UI in my app. I just want a setting to appear in android settings app under Apps when you pick my app from that list, it already has a section called "App settings". I want to add a setting for my app here, and be able to read it from my app. (Would be a bonus to be able to write to it from my app as well.)
Is this possible to do this and if so, can someone point me to an example.
Thanks for your time.
If you want to achieve that, you should add following nuget package firstly.
Xamarin.Android.Support.v7.Preference
Then create xml folder, Add the preferences.xml.
Here is code add preferences.xml for testing.
<PreferenceScreen
xmlns:app="http://schemas.android.com/apk/res-auto">
<SwitchPreferenceCompat
app:key="notifications"
app:title="Enable message notifications"/>
<Preference
app:key="feedback"
app:title="Send feedback"
app:summary="Report technical issues or suggest new features"/>
</PreferenceScreen>
Then create a class called MySettingsFragment.cs, PreferenceFragmentCompat comes from Android.Support.V7.Preferences, populator the preferences.xml by SetPreferencesFromResource method.
using Android.OS;
using Android.Runtime;
using Android.Support.V7.Preferences;
using Android.Views;
using Android.Widget;
namespace App32
{
public class MySettingsFragment : PreferenceFragmentCompat
{
public override void OnCreatePreferences(Bundle savedInstanceState, string rootKey)
{
SetPreferencesFromResource(Resource.Xml.preferences, rootKey);
}
}
}
In the end, we can add a FrameLayout in your layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/settings_container"/>
</RelativeLayout>
In the activity to use MySettingsFragment like Fragment's transaction.
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
SupportFragmentManager.BeginTransaction().Replace(Resource.Id.settings_container,new MySettingsFragment()).Commit();
}
}
}
Here is running sceenshot.
I ended up going with Xamarin.Essentials: Preferences as this was the closest I could find to what I wanted and I didn't have to have a settings UI in the app.
https://learn.microsoft.com/en-us/xamarin/essentials/preferences?context=xamarin%2Fandroid&tabs=android
I've been seeing an issue in an app I'm working on relating to views being visible when they shouldn't be and I was wondering if anyone had seen similar.
I have a fragment viewed from a viewPager, that fragment has a base layout, in that base layout I include a banner style area with some info in it and a button, the layout is defaulted to GONE in the XML, like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/usage_swipe_container"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:animateLayoutChanges="true"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/usage_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/background_colour">
<include layout="#layout/layout_in_question"
android:id="#+id/layout_in_question_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
.... Normal Stuff in layout
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
This view is only set to VISIBLE in very select circumstances. However some users are seeing it outside of those circumstances based on a response from a server call, its a very low percentage of users who are seeing it when they shouldn't ( in the region of 0.001% ), the server team insist its not them so I'm trying to ascertain if there are any known android issue or "hacks" that allow this sort of thing. The App supports API 15 and up and we're currently using support libs 25.3.0.
Has anyone seen behavior like this before? are there developer options on some devices that "show all views" or Modded OS's that allow it?
Edit: While I cant share full code snippets due to NDA, I have 2 locations the view can be enabled, both call the same method.
private View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState)
{
setupBanner();
}
/**
* OTTO event based on server response
*/
#Subscribe
public void receiveEvent(BannerEvent event)
{
setupBanner();
}
public void setupBanner() {
runOnUiThread(new Runnable() {
#Override
public void run() {
if (shouldShowBanner()) {
findViewById(R.id.layout_in_question_id).setVisibility(View.VISIBLE);
}
}
});
}
shouldShowBanner returns a boolean which is either true/false depending on what the server responded with.
I'm having a tough time getting a basic MvvmCross Android example working where the BackgroundColor of the RelativeLayout is bound to the ViewModel.
The app runs, some text appears, and I'm expecting my background to turn Yellow. The background color, however, remains unchanged.
I have included the Hot Tuna starter pack in both my Core and Droid projects as well as the MvvmCross - Color Plugin. My Droid project was automatically given ColorPluginBootstrap.cs
Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="BackgroundColor NativeColor(BackgroundColor)">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="20sp"
android:gravity="center"
android:text="Text to make sure the layout inflates" />
</RelativeLayout>
ViewModel
public class ViewModel : MvxViewModel
{
RGBAColorConverter _rgbaConverter;
public ViewModel()
{
var color = "#ffedff00";
_rgbaConverter = new RGBAColorConverter();
BackgroundColor = _rgbaConverter.Convert(color);
}
private MvxColor _backgroundColor;
public MvxColor BackgroundColor
{
get { return _backgroundColor; }
set
{
_backgroundColor = value;
RaisePropertyChanged(() => BackgroundColor);
}
}
}
Binding works - I've tried making other ViewModel properties that were string to do simple text binding. All of that seems just fine.
I've placed debugging break points on the getter of the BackgroundColor ViewModel property and I can see the MvxColor as expected.
What am I missing for my color binding scenario?
I haven't done anything extra in the Setup.cs
I haven't created any other wiring up classes in my Droid project
I haven't created any Android-specific color converter implementations
I've just written a test app and it seems to work for me - using 3.0.14 nuget binaries.
Also, the ValueConverters test app seemed to work OK - https://github.com/MvvmCross/MvvmCross-Tutorials/tree/master/ValueConversion
Looking at your sample, the only thing I can think of is that maybe you are only testing transparent colours (RGBA #ffedff00 has Alpha=0)
If that isn't it, can you post more - perhaps a full sample somewhere?
I want use the native sdk interface layout, (How a normal app) to design my game menu, and link it to the BaseGameActivity, or GameScene, I know how to design the interface using sdk native, but I dont know how implement it on andengine :S
I cant find any solution, I will hope anybody can help me to find the best method, or the way to use these.
Sorry for my bad english.
More info: I know how to add a little framelayout on my baseactivity, but I can a set of menus (2/3) and that you can move on it, and enter on the game and exit of the game :)
Sorry my english again
Well, I do this works :)
Only create a normal activity, with the layout etc.. and use the intent.putExtra(); to send a particular info to the BaseGameActivy, Then, on onCreateResources() I set a serie of conditions to determine that I press before, and set the wished scene.
Sorry my english :)
EDIT: imported tutorials from original website
How to use UI Android SDK with AndEndine
NOTE : You may have filling errors if you change width and heights in these layouts so be carefull (this solution works with fullscreen usage)
XML layout
In your project's directory res/layout create an empty file named themainactivity.xml and put the following content inside.
Notes : Set the attribute tools:context to your application activity name, beginning with a dot (here: .MyMainActivity)
XML layout file: res/layout/themainactivity.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- code placed here will be above the AndEngine render -->
</RelativeLayout>
Java class
You just have to specify the IDs in your class.
MyMainActivity.java
package com.example;
import org.andengine.ui.activity.SimpleLayoutGameActivity;
public class MyMainActivity extends SimpleLayoutGameActivity
{
#Override
protected int getLayoutID()
{
return R.layout.themainactivity;
}
#Override
protected int getRenderSurfaceViewID()
{
return R.id.gameSurfaceView;
}
}
Create a custom Android SDK layout in AndEngine
XML layout
WARNING: the root node must be a merge node ! Inside this you can do what you want.
XML layout file: res/layout/my_view.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:text="Dat button" />
</LinearLayout>
</merge>
The controller class
For being able to use your interface you have to link it to the XML view using the inflater service.
NOTE: The UI Java code is compiled when you switch to the WYSIWIG editor so if you don't add the linking code below you won't see the contents of the layout in the activities that use it.
Custom layout: MyView.java
package com.example;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
public class MyView extends LinearLayout
{
public MyView(Context context, AttributeSet attrs)
{
super(context, attrs);
// Link to the XML view
LayoutInflater.from(context).inflate(R.layout.my_view, this, true);
// Link to the XML view (alternative using service, you can delete if you don't need it)
//LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//inflater.inflate(R.layout.my_view, this);
}
}
Reuse in an other activity
Just add this code in the activity layout.
<com.example.MyView
android:id="#+id/myView1"
android:layout_width="100dp"
android:layout_height="wrap_content" />
I am developing an Android Application. In this application, Logo bar is shown on all pages(Activities) or we can say it has header on all pages.
This Logo Bar have few icons like Home, Login, Notification, etc. and on Clicking on these icons corresponding navigation will perform.
for example if user is any where in application and click on home icon, he will navigate to the home page of application.
I am able to inflate logobar.XML into my All Activity by coding. but problem is i have to call onClickListener on all pages for all icons in Logo Bar.
This is not a good programming way.
How can i implement Logo Bar Activity in all other activity without repeating of code?
Is android have any Master Page concept as in .Net or tiles concept as in Struts?
Please guide me.
Edit: ok i got it. may be this answer will help you.
Try using Tab widget with tabactivity check this link for using fragment and tab http://developer.android.com/reference/android/app/TabActivity.html for android. i think for lower versions also we can use this. this si what the link says - "you can use the v4 support library which provides a version of the Fragment API that is compatible down to DONUT."
you have to create your masterLayout in xml and that you have to include it in your other
layouts in which you have to have it.
The solution was pretty easy.
You need to extends "Activity" Class,in onCreate function SetContentView to your base xml layout and also need to override setContentView in base Activity Class
For Example:
1.Create "base_layout.xml" with the below code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#000000"
android:padding="15dp" >
<LinearLayout android:orientation="horizontal" android:background="#000000"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:minHeight="50dp" android:paddingLeft="10dp">
<ImageView android:layout_width="wrap_content" android:id="#+id/ImageView01"
android:adjustViewBounds="true" android:layout_height="wrap_content"
android:scaleType="fitCenter" android:maxHeight="50dp" />
</LinearLayout>
<LinearLayout android:id="#+id/linBase"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</LinearLayout>
</LinearLayout>
2.Create "BaseActivity.java"
public class BaseActivity extends Activity {
ImageView image;
LinearLayout linBase;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.base_layout);
image = (ImageView)findViewById(R.id.ImageView01);
image.setImageResource(R.drawable.header);
linBase = (LinearLayout)findViewById(R.id.linBase);
}
#Override
public void setContentView(int id) {
LayoutInflater inflater = (LayoutInflater)getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(id, linBase);
}
}
and
public class SomeActivity extends BaseActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.some_layout);
//rest of code
}
}
The only thing I noticed so far was that when requesting a progress bar (requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS)) this needs to be done before calling super.onCreate. I think this is because nothing can be drawn yet before calling this function.
This worked great for me and hopefully you will find this useful in your own coding.
There is something like that, but only available on api 11+ (3.2 and Android 4.0.x Ice Cream Sandwich). Its called actionbar ( http://developer.android.com/reference/android/app/ActionBar.html).
I have done this using XML file.
I am just creating runtime view from XML file , and add it to the Activity layout.
I have created method for that
public static void setLoginview(Context ctx, RelativeLayout layout) {
LayoutInflater linflater = (LayoutInflater) ctx
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View myView = linflater.inflate(R.layout.loginheader, null);
layout.addView(myView);
try {
layout.getChildAt(0).setPadding(0, 50, 0, 0);
} catch (Exception e) {
}
}
ctx is the application contetx and layout is the layout in which i want to add that view.